Как проверить hover через jQuery?

389

08 июля 2017, 11:38

Мне нужно чтобы при наведении на элемент в одном блоке, добавлялся класс элементу из другого блока и удалялся если курсор "уходит с элемента".

Вот мой пример, который я пытался реализовать, но он почему-то не работает должным образом:

$('.tab1').hover(function() { 
  $('.block-1').addClass('block-tab-1'); 
}, function() { 
  $('.block-1').removeClass('block-tab-1'); 
}); 
 
$('.tab2').hover(function() { 
  $('.block-1').addClass('block-tab-2'); 
}, function() { 
  $('.block-1').removeClass('block-tab-2'); 
}); 
 
$('.tab3').hover(function() { 
  $('.block-1').addClass('block-tab-3'); 
}, function() { 
  $('.block-1').removeClass('block-tab-3'); 
});

div[class*=block-tab] { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block-1"> 
  Этому блоку должен добавляться класс при наведении на .tab1, .tab2 или .tab3. 
</div> 
 
<div class="block-2"> 
  <a href="" class="tab1">Tab 1</a> 
  <a href="" class="tab2">Tab 2</a> 
  <a href="" class="tab3">Tab 3</a> 
</div>

Answer 1

Ваш пример прекрасно работает. Можете наглядно посмотреть: Пример тут

.block-tab-1 {
  background: yellow;
}
.block-tab-2 {
  background: blue;
}
.block-tab-3 {
  background: red;
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Добавить GET переменную по клику в URL

Есть код, он добавляет отпечаток в форму регистрации:

419

javascript

PhantomJs Не работает слип внутри evaluate

Всем приветНужно сделать sleep на 2 секунды в PhantomJs, после вернуть результат, пробовал через setTimeOut, но не возвращает результат

345

javascript

У меня три простых вопроса по синтаксису JavaScript [требует правки]

№1 A property that does not exist has which of the following values?

199

javascript

Кириллица в регулярном выражении JS

Данный код переводит в верхний регистр первых букв слова, но почему то не работает с кириллицей

247