JSFiddle - React, Tailwind, and code Playground

by slashingweapon

HTML

<button id="btnbuy">Buy</button>
<span id="chevron">&nbsp;&nbsp;</span>
<button id="btnsell">Sell</button>

CSS

#chevron.sell-it { background-color: red; }
#chevron.buy-it { background-color: green; }
#chevron.neutral { background-color: yellow; }

JavaScript

(function() {
    var chevron = $("#chevron");
    var defaultState;

    function toggle(tempClass, state) {
        return function(evt) {
            if (state) { chevron.toggleClass(defaultState, false); }
            chevron.toggleClass(tempClass, state);
            if (!state) { chevron.toggleClass(defaultState, true); }
        };
    }

        // decide on default state, then ...
    defaultState = 'buy-it';
    chevron.toggleClass(defaultState, true);

    $("#btnbuy").hover( toggle('buy-it', true), toggle('buy-it', false) );
    $("#btnsell").hover( toggle('sell-it', true), toggle('sell-it', false) );
})();