JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<div comp-id='one'>
    <div comp-id='two'>
        <div comp-id='three'>...</div>
    </div>
</div>

CSS

.hover {
    box-shadow: inset 0 0 0 2px red;
    -webkit-box-shadow: inset 0 0 0 2px red;
    -moz-box-shadow: inset 0 0 0 2px red;
    -o-box-shadow: inset 0 0 0 2px red;
}
/*
[comp-id] < [comp-id]:hover{
 box-shadow: none;
    -webkit-box-shadow: none;
   -moz-box-shadow: none;
    -o-box-shadow: none;    
}*/
 div {
    padding:10px;
}

JavaScript

$('div[comp-id]').hover(function(e){
    e.stopPropagation();
    $('.hover').removeClass('hover');
    $(this).addClass('hover');
}).mouseleave(function(e){
    $(this).removeClass('hover');
});