JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://www.google.com" target="_blank">hello</a>

<a href="http://www.google.com" target="_blank">ciao</a>

<a href="#" id="toggler">toggle</a>

CSS

a:hover {
    color:#f00;
}

a,
a:hover.disabled { color: #0f0; }

JavaScript

(function($){
    $.fn.rebind = function(){
        var init = 'init-rebind';
        return this.each(function() {
            var is_init = $(this).data(init);
            if (!is_init){
                $(this).data(init, true);
                $(this).bind('click.rebind mouseenter.rebind mouseleave.rebind', function(e){
                    if ($(this).hasClass('disabled')){
                        e.stopImmediatePropagation();
                        e.preventDefault();
                    }
                });
            }
        });
    };
})(jQuery);

$(function() {
    $("a").not('#toggler').rebind().click(
        function(){
            alert($(this).text());
        }
    );
    
    $('a').hover(
        function (){
            $(this).css('font-weight', 'bold');
        },
        function(){
            $(this).css('font-weight', 'normal');
        }
    );
    
    $('#toggler').toggle(
        function(e){
            $('a').not('#toggler').addClass('disabled');
            e.preventDefault();
        },
        function(e){
            $('a').removeClass('disabled');
            e.preventDefault();
        }
    );
});