Question

考虑我的html如下：

<ul id="menu">
<a href="home.html"><li class="highlighted" id="first_item">Home</li></a>
<a href="join.html"><li class="non_selected_tabs">Join</li></a>
<a href="fixtures.html"><li class="non_selected_tabs">Fixtures</li></a>
<a href="club.html"><li class="non_selected_tabs">Our Club</li></a>
<a href="history.html"><li class="non_selected_tabs">History</li></a>
<a href="club_gear.html"><li id="hover" class="non_selected_tabs">Club Gear</li></a>
</li>
</ul>

我的列表被设置为标签，我将我的主持人作为他们的父母，这样当用户将鼠标悬停在标签上时，它就变成了可选择的

我的问题是我希望使用：hover或其他锚属性来更改列表项的背景颜色...这可能使用CSS吗？我无法让它工作，所以我想我可能不得不使用一些JavsScript？

Answer 1

将<li>包裹在<a>中是不正确的HTML，可能无法在所有浏览器中正常呈现。更好的解决方案是将锚点的显示属性设置为display:inline-block。然后，您将能够将锚的宽度和高度设置为li的宽度和高度。这样你也可以使用锚点的悬停属性。

<ul id="menu">
 <li class="highlighted" id="first_item"><a  href="home.html">Home</a></li>
<li class="non_selected_tabs"><a href="join.html">Join</a></li>
<li class="non_selected_tabs"><a href="fixtures.html">Fixtures</a></li>
<li class="non_selected_tabs"><a href="club.html">Our Club</a></li>
<li class="non_selected_tabs"><a href="history.html">History</a></li>
<li id="hover" class="non_selected_tabs"><a href="club_gear.html">Club Gear</a></li>

</ul>

#menu li a
{
   display: inline-block;
   width: 100%;
   height: 100%;
}
#menu li a:hover
{
  background-color:red;
}

Answer 2

ul元素的直接子元素应该只是列表项元素，而不是a。

您可以在自己的:hover元素上使用li，这适用于不是IE的浏览器，甚至可能是IE8及以上版本。

或者您可以设置a的样式以占据li的整个空间区域，并将li设置为内联样式，以便不显示为典型列表。< / p>

Answer 3

您可以使用：悬停在其他元素上，而不仅仅是锚点。

a：悬停不会改变我的锚点列表属性

3 个答案: