CSS-Hover hat keinen Einfluss auf anderes Element

Question

CSS :hover funktioniert, wenn ich es für sein eigenes Element verwende, aber wenn ich versuchte, ein anderes Element zu beeinflussen, hatte es keinen Effekt.

Zum Beispiel, wenn ich diese Schaltfläche schwenken, sollten die versteckten Links angezeigt werden, aber sie nicht.

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

Ein Raum ist ein descendant combinator. Es zielt auf Nachkommen, aber das Div ist kein Nachkomme der Schaltfläche, es ist ein Geschwister.

Sie müssen stattdessen die adjacent sibling combinator verwenden: ein Pluszeichen.

Sie müssen auch zielen auf die Links (die Nachkommen von .dropcontent sind, so dass Sie einen Nachkomme Kombinator dort verwenden sollten), da es diejenigen ist, die Sie eingeschaltet haben und nicht die div.

.dropbutton:hover + .dropcontent a { 

Answer 2

ich die display: none; zum .dropcontent sich bewegen würde - wie es seine Anker bezieht sich jetzt, das heißt, Links und als solche weder aktuelle Antwort funktionieren würde -, dann verwenden

.dropbutton:hover + .dropcontent 
{ 
    display: block; 
} 

Aber hinterher dürfen Sie zwischen Dropbutton und Dropcontent nichts hinzufügen oder es wird nicht mehr funktionieren.

Answer 3

Verwenden Sie Javascript, um dies zu tun?

var button = document.getElementsByClassName('.dropbutton')[0], 
    menuContent = docuemnt.getElementsByClassName('.dropcontent')[0]; 

button.onmouseover = function(event) { 
    menuContent.style.display['block']; 
} 
button.onmouseout = function(event) { 
    menuContent.style.display['none']; 
} 

Mit einer leichten Änderung Ihrer CSS: .dropbutton sollte display: none haben, und Sie sollten die display: none von .dropcontent a