0

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

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

$('.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>

1
  • 1
    я в вашем коде добавил стиль для добавляемого класса (цвет при наведении для наглядности), все работает. Также добавил ссылку на jquery в сниппет ибо он не выполнялся
    – teran
    6 июл 2017 в 22:12

2 ответа 2

1

$('.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');
});
.block-tab-1 {
  color: red;
}

.block-tab-2 {
  color: green;
}

.block-tab-3 {
  color: blue;
}
<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>

0

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

.block-tab-1 {
  background: yellow;
}

.block-tab-2 {
  background: blue;
}

.block-tab-3 {
  background: red;
}
1
  • А есть альтернативный скрипт на hover? Этот вариант не очень подходит, он срабатывает даже если курсор уже находится на элементе - скрипт запускается заново. 7 июл 2017 в 5:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.