Question

所以我有以下菜单。

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a>
    <ul>
        <li><a href="">Polish</a></li>
        <li><a href="">Another one</a></li>
        <li><a href="">Another one</a></li>
    </ul>
    </li>
    <li><a href="#">More info</a></li>
    <li><a href="#">Contact</a></li>
</ul>

在1日的链接上我有不同的悬停背景。当我悬停“服务”时，第二个弹出，当我想从第二个悬停一个项目时，我希望第一个链接保持活动状态。

就像我悬停服务＆gt;波兰语我希望我的服务背景能够像徘徊一样。这只能用于css吗？

Answer 1

好的，我从头开始制作这个东西，你可以看看

Demo

Demo 2（家长background）

.menu > li {
    display: inline-block;
    position: relative;
}

.menu > li > ul {
    display: inline-block;
    position: absolute;
    display: none;
}

.menu > li:hover > ul {
    display: block;
}

.menu > li:hover a {
    color: #f00; 
    /* This selector will color all anchors nested inside li, 
       to be specific, please read the note below */
}

此处的关键选择器是.menu > li:hover a，我定位a元素，它嵌套在li内。

注意：在演示1中，我错过了>直接后代选择器，确保使用它来使您的选择器具体。所以改变这个 .menu > li:hover a至.menu > li:hover > a - New Demo

Answer 2

在你的css中尝试这个..

ul ul:hover + a { color: red; }

Demo

Answer 3

这样的东西？

DEMO

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
    <ul>
        <li><a href="">Polish</a></li>
        <li><a href="">Another one</a></li>
        <li><a href="">Another one</a></li>
    </ul>
</li>
<li><a href="#">More info</a></li>
<li><a href="#">Contact</a></li>

在悬停子元素时更改父级的背景

3 个答案: