On hovering #leaderboard, add a class to #left-arrow and #right-arrow

Question

Sorry for such a basic question, but I need to know how to add a class to two divs, #left-arrow and #right-arrow when I hoverover #leaderboard.

I understand I can use the call hover(), but I'm unsure how to implement it to add a class on another element.

I'm definitely a beginning with Javascript, so the more specific on how to implement it the better! Thanks!

-Judson

Answer 1

You can use .toggleClass(), like this:

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

This adds the class when you hover, removed it when the mouse leaves. If you want to just add the class, then .addClass() will work and you can manually remove it with .removeCass() later.

For this part:

I understand I can use the call hover(), but I'm unsure how to implement it to add a class on another element.

Just use a selector like I have above, you're not restricted to using this inside any function, you can use a selector or traverse functions to move around wherever appropriate.

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');
});