悬停在父元素上时样式子元素

Posted 2023-03-06

【中文标题】悬停在父元素上时样式子元素

【英文标题】：Style child element when hover on parent

【发布时间】：2011-11-05 05:52:32

【问题描述】：

当父元素悬停时如何改变子元素的样式。如果可能的话，我更喜欢 CSS 解决方案。是否有任何解决方案可以通过 :hover CSS 选择器。实际上，当面板上悬停时，我需要更改面板内选项栏的颜色。

希望支持所有主流浏览器。

【参考方案1】：

你也可以用这个

.parent:hover * 
   /* ... */

【讨论】：

你能解释一下你的答案吗？

@MassimoPetrus 将孩子的名字放在 * 不确定它是否适用于 svg 文件但对于内嵌 svg 这工作正常。您还可以通过放置一个空格，然后放置下一个孩子的名字来深入多个孩子

【参考方案2】：

是的，您可以使用下面的代码执行此操作，它可能会对您有所帮助。

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

【讨论】：

这个答案将受益于一些解释。在我看来，这里的代码比需要的多，而且不清楚我们应该关注代码的哪一部分。

【参考方案3】：

是的，你绝对可以做到这一点。只需使用类似的东西

.parent:hover .child 
   /* ... */

根据this page，所有主流浏览器都支持。

【讨论】：

终于学会了足够多的 CSS 知道要问什么，感谢帮助！请注意，这适用于所有后代，如果您只想要孩子，我认为您需要.parent:hover > .child?