JSFiddle - React, Tailwind, and code Playground

by kewah

HTML

<button><span>disable</span> mouse events on red square</button>
<p>mouseover: <span id="color"></span></p>
<div id="yellow"></div>
<div id="red"></div>

CSS

.disable {
    pointer-events: none;
}

#red {
    background-color: red;
    width: 200px;
    height: 200px;
    margin-top: -200px;
}

#yellow {
    background-color: yellow;
    width: 400px;
    height: 400px;
}

JavaScript

$('button').on('click', function() {
    var $state = $(this).find('span');
    
    if ($state.html() == 'disable') {
        $state.html('enable');
        $('#red').addClass('disable');
    } else {
        $state.html('disable');
        $('#red').removeClass('disable');
    }   
});

$('#yellow').on('mouseover', function() {
    $('#color').html('yellow');
});

$('#yellow').on('mouseout', function() {
    $('#color').html('');
});

$('#red').on('mouseover', function() {
    $('#color').html('red');
});

$('#red').on('mouseout', function() {
    $('#color').html('');
});