html - Apply element hover on an external class -

i trying change button's colour when hover external class. made doesn't work..

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 element             </button>         </div>     </div> </div> 

css:

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

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

i changed whole answer after edit.

the problem here should remove :hover .hover_element class:

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

working jsfiddle: https://jsfiddle.net/umz8t/2758/

if wanted hover event of table highlighted div under it, 2 things should done:

1.to add <tr><td> table (the :hover event won't work otherwise):

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

2.to remove :hover .apply_hover:

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

working jsfiddle: https://jsfiddle.net/umz8t/2759/

if want highlight both of them @ same time (on :hover event of .hover_element), should added:

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

working jsfiddle: https://jsfiddle.net/umz8t/2760/