JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<div id="container" style="border:solid 1px black;background-color:gray;display:inline-block;width:250px;height:200px;">
    <span>Quantity:</span><input type="text" value="10" size="5" /><input type="button" value="Add to Cart" />
    
    <div style="margin:30px;width:200px;height:100px;border:solid 1px black;background-color:gray;display:inline-block;">inner div, should not trigger mouseleave (parent stays blue)</div>
</div>

JavaScript

$(function(){
    $("#container").hover(
      function () {
        $(this).css('background-color','blue');
      }, 
      function () {
        $(this).css('background-color','gray');
      }
    );
});