JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testDiv">div element
    <p>P element</p>
    <p>P element</p>
    <p>P element</p>
</div>

CSS

.change {
    background:red;
}
p {
    background:green;
    height:30px;
    width:100px;
}
div{
    background:orange;
}

JavaScript

$(function () {
    $('div>p').on('mouseenter', function () {
        $(this).addClass('change');
    });
    $('div>p').on('mouseleave', function () {
        $(this).removeClass('change');
    });
});