悬停子元素时是否可以取消父悬停样式？

Question

父 div 和子 div 都定义了悬停样式，但我希望在子元素悬停时取消父悬停样式（仅使用 css）。

有可能吗？

Answer 1

据我所知，顾名思义，级联样式表 (css) 仅允许根据祖先设置子属性。无法根据子元素选择元素。

简而言之：没有。

Answer 2

这是一种“欺骗”你想要的效果的方法。只是不能嵌套父子，但可以将它们分组在一个包含的 div 中。

JS Bin Sample

body{
  margin:0;
}
.parent{
  height:100px;
  width:100px;
  background-color:blue;
}
.child {
  height:50px;
  width:50px;
  background-color:red;
  position:absolute;
  top:25px;;
  left:25px;
}

.parent:hover {
  background-color:green;
}
.child:hover {
  background-color:yellow;
}

  <div>
<div class="parent">
   </div>
  <div class="child">

  </div>
  </div>