JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.hover_element ~ .first_div .second_div .third_div .apply_hover:hover  {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    color:orange;
}
div ˜ div {
    color: red;
}


@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.2; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.2; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.2; }
    100% { opacity: 1.0; }
}