How to change from click to hover?

Question

JavaScript

Here I have the code buttons and blocks are arrays containing the IDs of the elements I need.

$(buttons).each(function(index, id) {
    $(id).click(function() {
        if ($(blocks[index]).css('opacity') == 1 ) {
             $(blocks[index]).css('opacity', '0');
        } else {
             $(bb).css('opacity', '0');
             $(blocks[index]).css('opacity', '1');
        };
    });
});

When clicked, everything works fine, but how to make it work when hovering with the cursor?

$(buttons).each(function(index, id) {
    $(id).hover(function() {
        if ($(blocks[index]).css('opacity') == 0 )  {
             $(bb).css('opacity', '0');
             $(blocks[index]).css('opacity', '1');
        } else {
             $(bb).css('opacity', '0');
             $(blocks[index]).css('opacity', '0');
        };
    })
});

The only moment, sometimes some block sticks and when hovering, the plate is transparent, and when you remove it, it lights up.

Example: lp.triotix.kz/#block-new88

Answer 1

$( id).click( function() {
    $( this)
        .off( 'click')
        .on( 'hover', callback);
})

Answer 2

Instead of click, hang a mouseover event (and, if necessary, mouseout)