JSFiddle - React, Tailwind, and code Playground

HTML

<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>
<input type="button" id="test" value="test"/>

CSS

div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }

JavaScript

var desifre = "no";
var i=0;
$( "div.overout" )
  .mouseover(function() {
    i++;
   desifre = "yes";
    $( this ).find( "span" ).text( "mouse over x " + i );
      

  })
  .mouseout(function() {
    $( this ).find( "span" ).text( "mouse out " );
  });
 
$('#test').click(function(){
alert(desifre);
});