gpt4 book ai didi

css - 悬停在父元素上时在子元素上应用 CSS?

转载 作者:太空宇宙 更新时间:2023-11-04 14:10:23 25 4
gpt4 key购买 nike

嗨, friend 们,我想在父元素上移动时在子元素上应用 css。

<html>


<head></head>
<style>
.nav_menu{
width:100%;
}
.nav_menu ul{
list-style-type:none;
list-style:none;
}
.nav_menu ul li{
display:inline-block;
padding:10px 20px;
background:#000000;
margin-left:10px;
}
.nav_menu ul li a{
text-decoration:none;
color : #FFFFFF;
}
// i alread try to write .nav_menu ul li:hover + a or
//.nav_menu ul li:hover, a
.nav_menu ul li:hover ~ a{
background : #FFFFFF;
color : #000000;
}
</style>
<body>
<div class='nav_menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Home</a></li>
</ul>
</div>
</body>
</html>

当更改 li 标签的背景并更改 a 标签的颜色时,我想将鼠标悬停在 li 标签上。

我不知道如何更改子元素的 css 以将鼠标悬停在父元素上。

请帮忙。

谢谢

最佳答案

li:hover a {
color: red;
}

li:hover {
background: green;
}

此外,有时您可能需要将其添加到

.nav_menu a {
display: inline-block;
}

关于css - 悬停在父元素上时在子元素上应用 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20813474/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com