Question

所以我有一些嵌套列表（只有一层深度），我遇到了CSS：悬停功能的问题。我只想将悬停应用于父类，但我无法想出那个。

这是我的CSS

<style type="text/css" media="screen">
.listblock li img {
   visibility: hidden;   
}  
.listblock li:hover img {
   visibility: visible;
} 
</style>

以下是其中一个列表的示例。

<ul>
    <li>One <a href="#"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Outbound Links', 'Amazon');"/></a></li>
    <li>Two <a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a>
        <ul>
            <li>Uno<a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a></li>
            <li>Dos <a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a></li>
        </ul>
    </li>
    <li>Three <a href="#"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Outbound Links', 'Amazon');"/></a></li>
</ul>

问题是Uno和Dos列表项中的图像也会悬停。：（

请帮忙！非常感谢

Answer 1

您可以使用子选择器>，如下所示：

.listblock > ul > li:hover img {
   visibility: visible;
}

它不在您的粘贴代码中，因此假设您的<ul>立即被class="listblock"项包装，如果中间还有其他内容，则只需使用相同的格式添加它。这只会选择直接子<il>，它是<ul>的直接子项，是直接 {{1}因此，它不会对.listbox元素进一步向下工作。

Answer 2

您可以添加以下内容：

.listblock li:hover li img {
   visibility: hidden;
}

CSS悬停在父列表上仅限项目

2 个答案: