Как переделать с click на hover?

Вот у меня есть код buttons и blocks это массивы содержащие ID нужных мне элементов.

$(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');
        };
    });
});

При клике всё работает отлично, а как сделать, чтобы работал при наведение курсором?

$(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');
        };
    })
});

Единственный момент, бывает какой-нибудь блок заедает и при наведение плашка прозрачная, а когда убираешь загорается.

Пример: lp.triotix.kz/#block-new88