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

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>