JSFiddle - React, Tailwind, and code Playground

by ALEKSEY SHULMAN

HTML

<ul class="mfn-megamenu-1">
    <li id="menu-item-512"><a href="">item 1</a></li>
    <li id="menu-item-513"><a href="">item 2</a></li>
    <li id="menu-item-514"><a href="">item 3</a></li>
  </ul>

CSS

.mfn-megamenu-1 {
background-size: contain;
background-repeat: no-repeat !important;
background-position: bottom right !important;}

.mfn-megamenu-1.yellow { 
    background-image: url(http://www.computerboulevard.com/wp-content/uploads/2017/03/bg-relocate.jpg);
}
.mfn-megamenu-1.gray { 
    background-image: url(http://www.computerboulevard.com/wp-content/uploads/2017/03/bg-pc.jpg);
}
.mfn-megamenu-1.pink { 
    background-image: url(http://www.computerboulevard.com/wp-content/uploads/2017/05/netwire.jpg);
}

JavaScript

$('#menu-item-512').hover(function() {
    $('.mfn-megamenu-1').addClass('yellow');
}, function() {
    $('.mfn-megamenu-1').removeClass('yellow');
});
$('#menu-item-513').hover(function() {
    $('.mfn-megamenu-1').addClass('gray');
}, function() {
    $('.mfn-megamenu-1').removeClass('gray');
});
$('#menu-item-514').hover(function() {
    $('.mfn-megamenu-1').addClass('pink');
}, function() {
    $('.mfn-megamenu-1').removeClass('pink');
});

$('#menu-item-512').click(function() {
    $('.mfn-megamenu-1').css('background-color', 'yellow');
    return false;
});
$('#menu-item-513').click(function() {
    $('.mfn-megamenu-1').css('background-color', 'gray');
    return false;
});
$('#menu-item-514').click(function() {
    $('.mfn-megamenu-1').css('background-color', 'pink');
    return false;
});