При наведении на #leaderboard добавьте класс к # стрелке влево и # стрелке вправо

Question

Извините за такой простой вопрос, но мне нужно знать, как добавить класс к двум элементам div, # стрелке влево и # стрелке вправо, когда я наведите курсор на #leaderboard.

Я понимаю, что могу использовать вызов hover (), но я не уверен, как реализовать его для добавления класса в другой элемент.

Я определенно начинаю с Javascript, поэтомучем конкретнее его реализовать, тем лучше!Спасибо!

-Джадсон

Answer 1

Вы можете использовать .toggleClass(), например:

$("#leaderboard").hover(function() {
  $("left-arrow, #right-arrow").toggleClass("myClass");
});

Это добавляет класс при наведении курсора, убирает его, когда мышь уходит. Если вы хотите просто добавить класс, тогда .addClass() будет работать, и вы можете вручную удалить его с помощью .removeCass() позже.

Для этой части:

Я понимаю, что могу использовать вызов hover (), но я не уверен, как реализовать его, чтобы добавить класс в другой элемент.

Просто используйте селектор, как у меня выше, вы не ограничены использованием this внутри любой функции, вы можете использовать селектор или функции перемещения чтобы перемещаться, где это уместно.

Answer 2

$('#leaderboard').hover(function() {
  // This first function is the hoverIn handler, when the user hovers over #leaderboard
  $('#left-arrow, #right-arrow').addClass('yourClassName');
}, function() {
  // This second function is the hoverOut, when the user stops hovering over #leaderboard
  $('#left-arrow, #right-arrow').removeClass('yourClassName');
});