Question

我有以下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，我尝试使用“＆gt;”，“+”和“〜”，但它不起作用。我不知道我使用不正确还是不可能。

有人可以帮帮我吗？

编辑1

以下是无效的CSS：

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

根据CSS Referente，在我的情况下，“〜”选择每个“ul”元素，前面是“a”元素，但不适用于我的代码。

Answer 1

如果您可以在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上时，改变.opubu后立即出现的.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>

Answer 2

使用html结构接近您想要的内容的唯一方法是在:hover上添加li。类似的东西：

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

请参阅this fiddle，background-position不会改变color，而是.submenu。当鼠标悬停在li上时，父级{{1}}也会悬停。

Answer 3

我不认为使用css是可能的，因为.option不是子菜单的子项

CSS：在元素指向之前悬停影响元素

3 个答案: