在悬停子元素时更改父级的背景 [英] Change background of the parent when hovering a child element

问题描述

所以我有以下菜单。

<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

这篇关于在悬停子元素时更改父级的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！