JSFiddle - React, Tailwind, and code Playground

HTML

<table class="hover_element">
    <tr>
        <td>Hover me!</td>
    </tr>
</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:hover ~ .first_div .second_div .third_div .apply_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;
    }
}