當我將滑鼠懸停在串列項上時，這些是我試圖在 li 元素上應用的樣式。但是這些樣式目前還沒有出現。我究竟做錯了什么？
#menu-ul a:hover {
border-bottom: 2px solid black;
}
#menu-ul a:focus {
border-bottom: 2px solid black;
}<ul id="menu-ul">
<span class="menu-item-selection">
<a href="#" id="brunch"><li>Brunch</li></a>
</span>
<span class="menu-item-selection">
<a href="#" id="bowls"><li>Bowls</li></a>
</span>
<span class="menu-item-selection">
<a href="#" id="beverages"> <li>Beverages</li></a>
</span>
<span class="menu-item-selection">
<a href="#" id="salads"> <li>Salads</li></a>
</span>
<span class="menu-item-selection">
<a href="#" id="desserts"> <li>Desserts</li></a>
</span>
</ul>uj5u.com熱心網友回復：
首先修復你的結構：<span>不能是元素的子<ul>元素。這應該是這樣的：
<ul id="menu-ul">
<li class="menu-item-selection">
<a href="#" id="brunch">Brunch</a>
</li>
<li class="menu-item-selection">
<a href="#" id="bowls">Bowls</a>
</li>
...
</ul>
uj5u.com熱心網友回復：
您應該針對 li 元素，而不是 a 元素：
#menu-ul a:hover li{
border-bottom: 2px solid black;
}
#menu-ul a:focus li{
border-bottom: 2px solid black;
}
uj5u.com熱心網友回復：
li您可以通過僅針對after來修復它，a:hover但我會更改 html 結構
#menu-ul a:hover {
border-bottom: 2px solid black;
}
#menu-ul a:focus {
border-bottom: 2px solid black;
} <ul id="menu-ul">
<li>
<span class="menu-item-selection">
<a href="#" id="brunch">Brunch</a>
</span>
</li>
<li>
<span class="menu-item-selection">
<a href="#" id="bowls">Bowls</a>
</span>
</li>
<li>
<span class="menu-item-selection">
<a href="#" id="beverages">Beverages</a>
</span>
</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/462178.html
標籤：javascript 打开天气图
上一篇：通過內容嵌套陣列映射不起作用