Как применить эффект наведения от одного элемента, который изменил другой элемент в HTML и CSS - PullRequest
Новая
       0

Как применить эффект наведения от одного элемента, который изменил другой элемент в HTML и CSS

0 голосов
/ 08 апреля 2020

Я работал над своим проектом, поэтому сначала я хочу, чтобы при перемещении .box div текст внутри div (h4 и p) становился белым. Но это не так, хотя я использовал (~) в моем CSS. Я думаю, что есть проблема в моей иерархии документа HTML. Вот моя часть моего кода, в любом случае, да, я прочитал другую страницу о Hover один элемент, изменить другой, и я попробовал все там, и ничего не изменилось. Может кто-нибудь мне помочь? Спасибо. 

.box{
        width: 157px;
        height: 95px;
        background: #FFFFFF;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 12.5px;
        overflow: hidden;
    }

    .title-box{
        position: relative;
        top: 17px;
        text-align: center;
        font-family: Product Sans;
        font-style: normal;
        font-weight: bold;
        font-size: 20px;
        line-height: 24px;
        text-align: center;
        letter-spacing: 0.02em;
        color: #E67E22;
    }

    .tc-1{
        position: relative;
        top: 26px;
        left: 33px;
        font-family: Product Sans Light;
        font-style: normal;
        font-weight: 300;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.02em;
        color: #000000;
    }

    .tc-2{
        position: relative;
        top: 26px;
        left: 14px;
        font-family: Product Sans;
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 16px;
        letter-spacing: 0.00em;
        color: #000000;
    }

    .tc-3{
        position: relative;
        top: -6px;
        left: 110px;
        font-family: Product Sans Light;
        font-style: normal;
        font-weight: 300;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.02em;
        color: #000000;
    }

    .tc-4{
        position: relative;
        top: -6px;
        left: 88px;
        font-family: Product Sans;
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 16px;
        letter-spacing: 0.00em;
        color: #000000;
    }

    .box:hover{
        background: #E67E22;
        transition: 0.5s;
        color: white;
    }

    .box:hover ~ h4, p{
        color: white;
    }
    <html>
        <head>
            <title>Stock Kompor</title>
            <meta charset="utf-8">
            <link rel="stylesheet" href="style-in1.css">
            <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
        </head>
    </html>
    <body>
        <div class="big-container">
            <div class="title">
                <span class="title-text">Kompor</span>
            </div>
            <nav id="wrapper">
                 <div onclick="deleteOps()" class="box">
                    <h4 class="title-box">Rinnai 522-E</h4>
                    <p class="tc-1">HB</p>
                    <p class="tc-2">313.000</p>
                    <p class="tc-3">HJ</p>
                    <p class="tc-4">345.000</p>
                </div>
            </nav>
        </div>
    </body>
    <script src="js-in1.js"></script>
    </html>

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

эти элементы не являются братьями и сестрами, но являются потомками .box, поэтому стиль должен быть 

.box:hover h4, 
.box:hover p {
    color: white;
}

общий комбинатор сестер (~) будет соответствовать вместо любого следующего брата элементы .box.

0 голосов
/ 08 апреля 2020 

.box{
    width: 157px;
    min-height: 95px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 12.5px;
    overflow: hidden;
}

.title-box{
    position: relative;
    top: 17px;
    text-align: center;
    font-family: Product Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #E67E22;
}

.tc-1{
    position: relative;
    top: 26px;
    left: 33px;
    font-family: Product Sans Light;
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: #000000;
}

.tc-2{
    position: relative;
    top: 26px;
    left: 14px;
    font-family: Product Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.00em;
    color: #000000;
}

.tc-3{
    position: relative;
    top: -6px;
    left: 110px;
    font-family: Product Sans Light;
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: #000000;
}

.tc-4{
    position: relative;
    top: -6px;
    left: 88px;
    font-family: Product Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.00em;
    color: #000000;
}

.box:hover{
    background: #E67E22;
    transition: 0.5s;
    color: white;
}

.box:hover h4, .box:hover p{
    color: white;
}
<html>
    <head>
        <title>Stock Kompor</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style-in1.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
    </head>
</html>
<body>
    <div class="big-container">
        <div class="title">
            <span class="title-text">Kompor</span>
        </div>
        <nav id="wrapper">
             <div onclick="deleteOps()" class="box">
                <h4 class="title-box">Rinnai 522-E</h4>
                <p class="tc-1">HB</p>
                <p class="tc-2">313.000</p>
                <p class="tc-3">HJ</p>
                <p class="tc-4">345.000</p>
            </div>
        </nav>
    </div>
</body>
<script src="js-in1.js"></script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...