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

Question

父级和子级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>