JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myElement"></div>
<div class="help floated">
    <strong>Why?</strong> MooTools features mouseenter and mouseleave because mouseover/mouseout sometimes
    just does not work as expected. Mouseenter only fires once you enter the element and
    does not fire again if your mouse crosses over children of the element.
</div>
<div style="clear: both;">
    <!-- space -->
</div>
<h2>Menu Example</h2>
<p>
    This example explains how to open a menu-like element on mouseenter and
    how it closes again on mouseleave.
</p>
<div id="myElementa"></div>
<div id="myElementb"></div>
<div id="myElementc"></div><br/><br/><br/><br/><br/><br/>
<div id="myElementd"></div>
<div id="myElemente"></div>
<div id="myElementf"></div>
</div>

CSS

div.floated {
    width: 400px;
    float: left;
    margin-left: 1em;
}

div#myElement {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #f9f9f9;
    float: left;
}
div#myElementa {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #f9f9f9;
    float: left;
}
div#myElementb {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #f9f9f9;
    float: left;
}

div#myElementc {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #f9f9f9;
    float: left;
}
div#myElementd {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #f9f9f9;
    float: left;
}
div#myElemente {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #f9f9f9;
    float: left;
}
div#myElementf {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    background-color: #f9f9f9;
    float: left;
}


div#myOtherElement {
    width: 200px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    border: 1px solid black;
    background-color: #f9f9f9;
}

div#myOtherElement span, div#myOtherElement a {
    display: block;
    padding: 0 3px;
}

div#myOtherElement a:hover {
    background: #f5f5f5;
}

JavaScript

window.addEvent('domready', function(){

    //First Example
    var el = $('myElement'),
        color = el.getStyle('backgroundColor');

    // We are setting the opacity of the element to 0.5 and adding two events
    $('myElement').set('opacity', 0.5).addEvents({
        mouseenter: function(){
            // This morphes the opacity and backgroundColor
            this.morph({
                'opacity': 0.6,
                'background-color': '#E79D35'
            });
              // hover Selected WORK
            $('myElementb').morph({
                'opacity': 0.6,
                'background-color': '#E79D35'
            });
             $('myElemente').morph({
                'opacity': 0.6,
                'background-color': '#E79D35'
            });
              $('myElementf').morph({
                'opacity': 0.6,
                'background-color': '#E79D35'
            });
        },
        mouseleave: function(){
            // Morphes back to the original style
            this.morph({
                opacity: 0.5,
                backgroundColor: color
            });
             $('myElementb').morph({
                opacity: 0.5,
                backgroundColor: color
            });
             $('myElemente').morph({
                opacity: 0.5,
                backgroundColor: color
            });
                $('myElementf').morph({
                opacity: 0.5,
                backgroundColor: color
            });
        }
    });

   

});