Gordog Gordog - 2 months ago 19
CSS Question

:hover effects not working

I'm using FoundationPress https://foundationpress.olefredrik.com/
to make a site. I'm trying to toggle the display of a div by hovering on another div. Here is the styling:

.test_div {
background-color:blue;
height:50px;
display:none;
}

.test_button {
width:100px;
height:50px;
background-color:blue;
cursor:pointer;
}

.test_button:hover {
background-color:green;
}

.test_button:hover .test_div {
background-color: red;
display:block;
}


And here is the html:

<div class='test_button'>Hover to change test_div</div>
<div class='test_div'>I should be displayed</div>


It just won't work.
Thanks.

Answer

You can use the sibling css selector ~.
Note that the two elements should be siblings (have the same parent) And the first should appear before the second in the DOM tree.

.test_div {
background-color:blue;
height:50px;
display:none;
}

.test_button {
width:100px;
height:50px;
background-color:blue;
cursor:pointer;
}

.test_button:hover {
background-color:green;
}

.test_button:hover ~ .test_div {
background-color: red;
display:block;
}
<div class='test_button'>Hover to change test_div</div>
<div class='test_div'>I should be displayed</div>