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

Question

[Егор Рублёв]

Вот у меня есть код 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

Answer 1

[Alexander Litvinenko]

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

Comments

[Егор Рублёв]

Что-то я утонул читая статью о callback, а почему нельзя сразу $(id).hover...?

[Alexander Litvinenko]

Егор Рублёв: вы ведь сами написали переделать, так понимаю вам надо отменить клик сначала

[Егор Рублёв]

Alexander Litvinenko: спасибо конечно, но смысл не много утрирован, я пытаюсь сделать аналогичный скрипт под .hover без лишних манипуляций.

[Alexander Litvinenko]

Егор Рублёв:

$( buttons).each( function( index, id) {

    var cb = function() {
        if ( $( blocks[ index]).css( 'opacity') == 1) {
             $( blocks[ index]).css( 'opacity', '0');
        } else {
             $( bb).css( 'opacity', '0');
             $( blocks[ index]).css( 'opacity', '1');
        };
    }

    $( id).click( cb);
    $( id).mouseover( cb);
});

Answer 2

[Александр]

Вместо click вешайте событие mouseover (и, при необходимости, mouseout)

Comments

[Егор Рублёв]

Спасибо за ответ, написал в шапке дополнения, это решит мою проблему?

[Александр]

Hover, судя по документации умеет принимать два callback. Можно сделать так:

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

[Егор Рублёв]

Благодарю