1

我有以下 HTML 结构：

<ul class="container">
    <li>
        <a href="#" class="option"></a>
        <ul class="submenu">
            <li><a href="#">Item A</a></li>
            <li><a href="#">Item B</a></li>
         </ul>
     </li>
</ul>

当鼠标悬停在“子菜单”上时，是否可以使用 CSS 更改“选项”的背景位置？

我看到了CSS Referente，我尝试使用“>”、“+”和“~”，但它不起作用。我不知道是我使用不正确还是不可能。

有人可以帮我吗？

编辑 1

这是不起作用的CSS：

a.option~ul.submenu:hover {
    background-position:0 -48px;
}

根据CSS Referente，在我的例子中，“~”选择每个前面有“a”元素的“ul”元素，但不适用于我的代码。

4

3 回答 3

4

如果您可以将“选项”放在 UL 之后，那么它将起作用：

<ul class="container">
    <li>
        <ul class="submenu">
            <li><a href="#">Item A</a></li>
            <li><a href="#">Item B</a></li>
         </ul>
        <a href="#" class="option"></a>
     </li>
</ul>

这个CSS：

.submenu:hover + .option {
    background-position: -20px -20px;
}

用简单的英文写成：当悬停在 .submenu 上时，更改 .submenu 之后立即出现的 .option 的背景位置。希望有帮助。

.submenu:hover ~ .option {
    background-position: -20px -20px;
}

这与“+”选择器相同，除了 .option 不必紧跟在 .submenu 后面。例如，“+”不适用于以下标记，但“~”可以使用。

<ul class="container">
    <li>
        <ul class="submenu">
            <li><a href="#">Item A</a></li>
            <li><a href="#">Item B</a></li>
        </ul>
        <span>Some other element</span>
        <a href="#" class="option"></a>
     </li>
</ul>
于 2012-06-01T15:55:38.580 回答
1

接近您想要的 html 结构的唯一方法是:hover在li. 就像是：

.container > li:hover > .option {
    background-position: 0 0;
}

看看这个不会改变的小提琴background-position，但是color。当悬停.submenu在 parent 上时也会有一个悬停li。

于 2012-06-01T15:51:56.193 回答
0

我认为这是不可能的，因为 .option 不是子菜单的子菜单

于 2012-06-01T15:47:32.587 回答