I have 3 child divs inside a parent div, at present only parts of the child divs change color on mouse over, I want all the child divs to change color on part mouse hover. thanks
I have tried the code below
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
display: inline-block;
cursor: pointer;
width: 35px;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.bar1:hover, .bar2:hover, .bar3:hover {
width: 35px;
height: 5px;
background-color: #e5e5e5;
margin: 6px 0;
transition: 0.4s;
}
</style>
</head>
<body>
<div style=" text-align: right; padding-right: 30px;">
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</body>
</html>
You can accomplish this by selecting children of your parent node when hovered.
Your current code:
.bar1:hover, .bar2:hover, .bar3:hover {
width: 35px;
height: 5px;
background-color: #e5e5e5;
margin: 6px 0;
transition: 0.4s;
}
... will apply to each element individually (i.e., .bar3 itself will need to be hovered to trigger that state).
Instead, you want to select child elements of .container:hover:
.container:hover .bar1, .container:hover .bar2, .container:hover .bar3 {
width: 35px;
height: 5px;
background-color: #e5e5e5;
margin: 6px 0;
transition: 0.4s;
}
This will apply the styles to:
.bar1, when container is hovered.bar2, when container is hovered.bar3, when container is hoveredEDIT: I didn't realize at first that bar1 is a sibling of the other two. Updated my answer to apply style based on container:hover.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments