JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<div id="box">
    <p class="hovertip">Stuff to have a hover over</p>
    <p class="hovertip">More stuff to have a hover over</p>
</div>

CSS

#box {
 width:400px;
 height:400px;
 overflow:hidden;    
}

.hovertip {
    width:180px; height:180px;
    background: green;
    float:left;
    margin:5px;
}

JavaScript

$("#box").on('mouseover', '.hovertip', function() {
      $(this).css("background-color","red");
    });

    $("#box").on('mouseout', '.hovertip', function() {
      $(this).css("background-color","green");
    });