Как снять выделение у блока, выделенного по-умолчанию?

238

17 февраля 2018, 21:43

Есть три блока, каждый из которых должен подсвечиваться, при наведении мыши. Блок №1 подсвечен по-умолчанию. При наведении на блоки № 2 и 3, выделение должно сниматься с блока №1 и подключаться к выделенному блоку.

https://codepen.io/magnu/pen/KQMwMZ

Не понимаю, как этого добиться при помощи jquery.

$('.block').hover(function () {
if ($('.block').not('.active')) {
$(this).toggleClass('active') 
}               
});

Answer 1

Можно так:

$('.block').hover(function () {
  $(this).addClass('active').siblings('.block').removeClass('active');
});

Answer 2

Попробуйте так:

$('.block').hover(function () {
  $('.active').removeClass('active');
  $(this).addClass('active');
});

Answer 3

Вариант, с возвращением класса active второму элементу, если курсор мыши за пределами элемента-обвертки blocks_wrapper

const blocks = $('.block').on('mouseenter', function() {
    blocks.not(this).removeClass('active');
    $(this).addClass('active');
});
$('.blocks_wrapper').on('mouseleave', function() {
    blocks.eq(1).trigger('mouseenter');
});