Saif Obeidat Saif Obeidat - 4 months ago 23
CSS Question

CSS hover does not affect on other element

CSS

:hover
works when I use it for it's own element, but when i tried to affect another element, it had no effect.

For example, when I hover this button, the hidden links should appear, but they do not.



.dropdown {
position: relative;
display: inline-block;
border: 1px solid black;
width: 200px;
}
.dropbutton {
width: 100%;
height: 60px;
color: white;
background: #017678;
border: none;
}
.dropcontent a {
color: black;
text-align: center;
line-height: 40px;
text-decoration: none;
height: 40px;
background-color: #DDD;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #9fa0a8;
display: none;
}
a:last-of-type {
border: none;
}
.dropbutton:hover .dropcontent {
display: block;
}

<div class="dropdown">
<button class="dropbutton">SHOW CONTENT</button>
<div class="dropcontent">
<a href="#">c1</a>
<a href="#">c2</a>
<a href="#">c3</a>
</div>
</div>




Answer

A space is a descendant combinator. It targets descendants, but the div is not a descendant of the button, it is a sibling.

You need to use the adjacent sibling combinator instead: a plus sign.

You also need to target the links (which are descendants of .dropcontent so you should use a descendant combinator there) since it is those which you have set display: none on and not the div.

.dropbutton:hover + .dropcontent a {