爲什麼我的CSS無法正常工作？

標題說明了一切;我的CSS：爲什麼我的CSS無法正常工作？

a.menu:hover { 
opacity: 1; 
text-shadow: 0 0 10px white; 
} 
a.menu:hover ~ .dropdown { 
display: block; 
} 

.dropdown { 
display: none; 
width: 50px; 
height: 50px; 
position: absolute; 
top: 120px; 
left: 120px; 
background: red; 
}

HTML：

<p class="left_topbar"> 
    <a href="http://teamcowgames.net" class="logo"><img src="css/img/logo.png"></a> 
     <a href="http://teamcowgames.net/games" class="menu">Games &#9662;</a> 
</p> 

<div class="dropdown"></div>

爲什麼懸停在菜單鏈接時.dropdown現在得到看得見？

來源

2015-11-19 Jonathan Öhrström

其實你的h2不是h1標籤的孩子。你必須使用sibling operator(+)來實現這一點。

h1:hover + h2{ 
    display: block; 
    }

上述解決方案將指向下一個直接的兄弟元素。如果要定位所有元素，請使用~運算符。

h1:hover ~ h2{ 
    display: block; 
    }

編輯：

根據您的修改，看起來你必須改變順序如下圖所示。

a.menu:hover { 
    opacity: 1; 
    text-shadow: 0 0 10px white; 
} 
.dropdown { 
    display: none; 
    width: 50px; 
    height: 50px; 
    position: absolute; 
    top: 120px; 
    left: 120px; 
    background: red; 
    } 
a.menu:hover ~ .dropdown { 
    display: block; 
}

HTML

<div class="left_topbar"> 
     <a href="http://teamcowgames.net" class="logo"><img src="css/img/logo.png"></a> 
     <a href="http://teamcowgames.net/games" class="menu">Games &#9662;</a> 
     <div class="dropdown"></div> 
</div>

來源

2015-11-19 08:51:23

謝謝！這做到了！ –

編輯：當我在我的網站上試用它時，它似乎不適用於我的代碼。我的代碼是在我的主要帖子 –

檢查我編輯的答案。 –

你想改變

到

由於箭頭是後代選擇，而加是兄弟選擇。

來源

2015-11-19 08:49:23 samuelmr

爲什麼我的CSS無法正常工作？

回答

相關問題