How to apply a hover effect from one element that changed another element in HTML and CSS
Question
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>2 answers
solution1
1 2020-04-08 07:29:13
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 .
solution2
0 2020-04-08 07:34:41
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Hover on one HTML element effect another
How to apply css class on hover for just one html element
How to add hover effect when one element hovered and affect on another element / class in css?
HTML/CSS hover one element, effect on two different divs?
CSS - Hover on element doesn't apply style to another one
CSS hover effect to modify another element is not working
Apply a CSS hover effect to an element that’s not a child of the hovered element
On a css hover effect, not able to select/apply effect to a specific element?
Apply hover effect on child element
How to use :hover for one element and chnage another class css proprties
Related Tags