CODEWITHSUNDEEP
htmlcss
user12612479
user12612479

Reputation:

How to apply a hover effect from one element that changed another element in HTML and CSS

I've been working on my project, so initially, I want if the .box div is being hovered, the text inside the div (h4 and p) is turning to white. But it doesn't even though I've used (~) in my CSS. I think there's a problem in my hierarchy of the HTML document. Here's my part of my code, anyway yes, I've read the other page about Hover one element, change other and I've tried everything there and nothing change. Can anyone help me? Thanks. 

.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>

Upvotes: 0

Views: 40

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

those elements are not siblings but children of .box, thus the style should be

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

the general sibling combinator (~) would match instead any following sibling elements of .box.

Upvotes: 1

Keyur Gajjar
Keyur Gajjar

Reputation: 360

.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>

Upvotes: 0

Related Questions