CSS懸停不會影響其他元素

Question

當我將CSS :hover用於它自己的元素時，它可以工作，但是當我嘗試影響另一個元素時，它沒有任何作用。

例如，當我將鼠標懸停在該按鈕上時，應顯示隱藏的鏈接，但不會顯示。

 .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

空間是后代組合器 。 它以后代為目標，但div不是按鈕的后代，它是同級。

您需要使用相鄰的同級組合器 ：加號。

您還需要定位鏈接（這些鏈接是.dropcontent后代，因此您應在此使用后代組合器），因為這些鏈接已設置為display: none ，而不顯示div。

.dropbutton:hover + .dropcontent a {

Answer 2

我要移動display: none; 到.dropcontent本身-因為它現在與它的錨點（即鏈接）有關，因此，當前答案都不起作用-然后使用

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

但是您之后不得在dropbutton和dropcontent之間添加任何內容，否則它將不再起作用。

Answer 3

您是否正在使用Javascript執行此操作？

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'];
}

稍微更改一下CSS： .dropbutton應該具有display: none ，並且您應該從.dropcontent a刪除display: none 。