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

问题描述：

所以我有以下菜单。

<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>

在第一个链接上，我在悬停时有不同的背景。当我徘徊服务时，第二个弹出，当我想从第二个项目悬停一个项目，我想从第一个链接保持活动。

On the links on the 1st i have different background on hovering. When i hover the "Services" the 2nd pops up and when i wanna hover a item from the 2nd i want the link from the first to stay active.

hover服务>波兰语我想我的服务的背景保持像它徘徊。

Like when i hover Services > Polish i want my Services' background to remain like it's hovered. Is that possible in css only?

答

好吧，我从头开始做这件事，你可以看看

Ok, I've made this thing from scratch, you can check it out

演示

演示2 （

Demo 2 (With background on parent)

.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 ，我的目标是元素嵌套在 li 中。 / p>

The crucial selector over here is this one, .menu > li:hover a, I am targeting a element which is nested inside li.

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

Note: In Demo 1, I've missed out the > direct descendent selector, make sure you use it to make your selector specific. So change this .menu > li:hover a to .menu > li:hover > a - New Demo

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

相关推荐