On hover, add class

Coding Help
1

How I can this: when hover element which the element’s id is abc, find element by id bla, and add class abc; else, remove class abc and add class bac?

NOTE: I have tried this:

<script>
  var hoverElement = document.getElementById('abc')
  $(liii).hover(
    function() {
      var classElement = document.getElementById('bla')
      menu.addClass('abc')
    }, function() {
      classElement.removeClass('abc')
      classElement.addClass('bac')
    }
  )
</script>
2

@eray6421 I think I’m not understanding the desired behavior – can you describe it more completely?

When you hover over an element with an id of abc, my understanding is that you want to add the class abc to the element with an id of bla.

When you say “else”, what is the circumstance you’re describing – do you mean when the user stops hovering over the element with an id of abc, or do you mean, in the case of the element with the id bla already having the class of abc?

3

@househaunt, I’m creating a dropdown menu. I want this:

When the user hovers the Categories button, add class visible and set the menu’s visibility visible at css. And the user stops hover, remove class visible, add class hidden, and set the menu’s visibility hidden. As this:

<style>
.visible {
  visibility: visible
}
.hidden {
  visibility: hidden
}
</style>

<script>
var button = document.getElementById('categoriesButton')
var menu = document.getElementById('dropdownMenu')
$(button).hover(
  menu.addClass('visible')
) else (
  menu.removeClass('visible')
  menu.addClass('hidden')
)
</script>
4

You’re really close – it should start working with just a few changes.

The first problem is formatting for the hover rule. The hover method expects you to pass in two arguments – the first function will be called when the mouse enters the element, and the second function will be called when the mouse exits the element. You can read more about it here, if you’re interested: https://api.jquery.com/hover/. So you want to rewrite this without the else statement – something more like this:

$(myElement).hover(
  function(){
    console.log("Now you see me!");
  },
  function(){
    console.log("Now you don't!");
  }
);

The second thing is that you’re using jQuery methods ( addClass and removeClass) on plain JavaScript elements. (And jQuery is an extension of JavaScript.) You can perform the same operations on plain JavaScript elements, but you can’t use those exact methods. To use those methods, you need those elements to be wrapped in jQuery – instead of calling menu.addClass('visible'), call $(menu).addClass('visible') and those calls should start firing.

The last issue is that while you remove the visible class when the user stops hovering, you don’t remove the hidden class when the user starts hovering – so if they’ve hovered in and out before, it will stay hidden. There are a couple solutions here to choose from –

  1. You could add $(menu).removeClass('hidden'); to the first callback (directly below $(button).hover(.
  2. You could simplify the code (always a win) by setting the default styles of the menu itself to hidden by changing your styles to look like this:
#dropdownMenu {
  visibility: hidden;
}

#dropdownMenu .visibile {
  visibility: visible;
}

Then you could simplify your hover rule to look like this:

$(button).hover(
  function() {
    $(menu).addClass('visible');
}, {
  function() {
  $(menu).removeClass('visible');
});

There are a lot of different ways to do this – see which one feels best to you, and let me know if you run into any problems.

PS: One complication to keep in mind here is that when your mouse leaves the trigger button, and enters the menu, the menu will disappear again – but I don’t know if that’s relevant to your case here

2 Likes
5

Okay, thanks very much!

6

The code wasn’t worked; if I send project’s edit link; can you help me?

7

Sure, send it on over!

8

Okay, thank you very much!