將元素懸停在外部類

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/