当悬停在父元素上时设置子元素的样式
当悬停在父元素上时设置子元素的样式
提问于 2011-08-28 04:46:45
如何在悬停在父元素上时更改子元素的样式。如果可能的话，我更喜欢CSS解决方案。是否有任何可能的解决方案通过:悬停CSS选择器。实际上，当面板上有悬停时，我需要更改面板内选项栏的颜色。
希望支持所有主要浏览器。
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-08-28 05:16:01
Stack Overflow用户
发布于 2016-02-16 14:17:44
是的，你可以使用下面的代码来做到这一点，它可能会对你有所帮助。
.parentDiv{
margin : 25px;
}
.parentDiv span{
display : block;
padding : 10px;
text-align : center;
border: 5px solid #000;
margin : 5px;
}
.parentDiv div{
padding:30px;
border: 10px solid green;
display : inline-block;
align : cente;
}
.parentDiv:hover{
cursor: pointer;
}
.parentDiv:hover .childDiv1{
border: 10px solid red;
}
.parentDiv:hover .childDiv2{
border: 10px solid yellow;
}
.parentDiv:hover .childDiv3{
border: 10px solid orange;
}<div class="parentDiv">
<span>Hover me to change Child Div colors</span>
<div class="childDiv1">
First Div Child
</div>
<div class="childDiv2">
Second Div Child
</div>
<div class="childDiv3">
Third Div Child
</div>
<div class="childDiv4">
Fourth Div Child
</div>
</div>
Stack Overflow用户
发布于 2020-07-25 15:41:40
你也可以用这个
.parent:hover * {
/* ... */
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7217244
复制相关文章
相似问题