将元素悬停在外部类

Question

我试图在悬停外部类时更改按钮的颜色。这是我做了什么，但它不工作..

HTML：

<table class="hover_element"> 
    Hover me! 
</table> 
<div class="first_div"> 
    <div class="second_div"> 
     <div class="third_div"> 
      <button class="apply_hover"> 
       Apply hover on this element 
      </button> 
     </div> 
    </div> 
</div> 

CSS：

.hover_element:hover ~ .first_div .second_div .third_div .apply_hover { 
    color: orange; 
} 

https://jsfiddle.net/umz8t/2754/

Answer 1

我你的编辑后，改变了我的答案。

这里的问题是，你应该删除:hover从.hover_element类：

.hover_element ~ .first_div .second_div .third_div .apply_hover:hover 

工作的jsfiddle：https://jsfiddle.net/umz8t/2758/

如果您想要一个表的hover事件凸显下的div ，应该做两件事：

1.to将<tr><td>加到表中（:hover事件，否则不会工作）：

<table class="hover_element"> 
    <tr> 
     <td>Hover me!</td> 
    </tr> 
</table> 

2.to删除:hover从.apply_hover：

.hover_element:hover ~ .first_div .second_div .third_div .apply_hover 

工作的jsfiddle：如果你想突出他们两个https://jsfiddle.net/umz8t/2759/

（:hover事件.hover_element），那么应该加上：

.hover_element:hover, .hover_element:hover ~ .first_div .second_div .third_div .apply_hover 

工作的jsfiddle：https://jsfiddle.net/umz8t/2760/