Question

当用户将鼠标悬停在下拉列表上时，我正在尝试保持主导航项处于活动状态。但是，它并不像仅针对li:hover{}

那样直截了当

出于内容管理的原因，我们在HTML中使用导航的图像精灵，而不是CSS。这是HTML：

<div class="nav">
<ul>
    <li class="dropdown"><a href="#"><span class="clip"><img src="css/img/nav-products.png" alt="nav-products" width="81" height="243"></span><span class="link">Our Products</span></a>
        <ul>
            <li><a href="#"><img src="css/img/product.jpg" /><span>Laptops</span></a></li>
            <li><a href="#"><img src="css/img/product.jpg" /><span>Tablets</span></a></li>
        </ul>
    </li>
    <li><a href="#"><span class="clip"><img src="css/img/nav-buy.png" alt="nav-buy" width="81" height="162"></span><span class="link">Where to Buy</span></a></li>
</ul>
</div>

这是CSS：

.nav ul li a{padding: 0px; height: 81px; width: 81px;}
.nav ul li a span.clip{height: 81px; width: 81px; display: block; overflow: hidden;}
.nav ul li a span.clip img{position: relative; top: -81px;}
.nav ul li a:hover span.clip img{position: relative; top: 0px;}
.nav ul li.dropdown a:hover span.clip img{position: relative; top: -162px;}

当用户将鼠标悬停在下拉列表上时，知道如何定位img吗？因此，用户将鼠标悬停在.nav ul li.dropdown ul li:hover上，我需要调整span.clip img的代码？

谢谢！杰森

Answer 1

我们有机会看到这样的实例，看看图片的样子。我想也许你将不得不使用一个儿童组合器，也许就像`nav ul＆gt; li.dropdown a：hover span.clip但很难没有一个有效的例子。

Answer 2

试试这个：

.nav ul li.dropdown:hover span.clip img {
    // styles here
}

如何在将鼠标悬停在下拉列表时激活主导航项？

2 个答案: