JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ccsg"></div>
<div class="akjr"></div>
<div class="foo">
    <div class="foo">
        <div class="foo2">
            <div class="foo3">
                <div class="foo4">
                    <div class="foo5">
                        <div class="foo6">
                            <p>
                                text
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bb"></div>
<div class="cc"></div>

CSS

div{
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
}

p{
    border: 1px solid black;
    background: green;
}

.foo3{
    background: #e5e5e5;
}

JavaScript

$("div,p").not(".foo, .foo *").hover(function(){
    $(this).css("background", "#70A5C9");
},function(){
    $(this).css("background", "#ffffff");
});