How do I apply a hover class to my element?

Question

I’m using jQuery 1.12. I have this class for when someone hovers over an LI element

.select-options li:hover {
  color: gray;
  background: #fff;
}

How do I use jQuery to trigger applying this class to an LI element? I have tried this

 $(".select").bind('keydown', function(event) {
    elt = $(this).find('.select-options li:hover')
    if (elt.length == 0) {
        elt = $(this).find('.select-options li:first')
    }       // if
    var next;
    switch(event.keyCode){
    // case up
    case 38:        
        break;
    case 40:
        next = $(elt).next();
      console.log($(next).text());
          $(next).trigger('mouseenter');
      break;
    }    
 });

but the $(next).trigger('mouseenter'); doesn’t seem to be working. You can check out my Fiddle here — http://jsfiddle.net/cwzjL2uw/15/ . Click the “select State” drop down and then click the down key on your keyboard to trigger the block of code above.

Possible duplicate of [Trigger css hover with JS](http://stackoverflow.com/questions/4347116/trigger-css-hover-with-js) — Jon Uleis, Jan 02 '17 at 20:01

james_bond · Accepted Answer · 2017-01-02T23:58:32.707

Per MDN:

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected.

So it is not necessarily a class applied to the element, also :hover is used in the context of a pointing device interaction (for example a mouse).

In your case this should give you an starting point:

Bind your li elements to the hover event in jquery:

$(".select-options li")
.hover(
function(e) {
    $(this).addClass("selected");
},
function(e) {
    $(this).closest(".select-options").find("li.selected").removeClass("selected");
}
);

$(".select").bind('keydown', function(event) {
var currentElement = $(this).find(".select-options li.selected");
if (currentElement.length == 0) {
    currentElement = $(this).find(".select-options li")[0];
    $(currentElement).addClass("selected");
    return;
}       // if
var nextElement;
switch(event.keyCode){
// case up
case 38:
    nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) - 1) % $(this).find(".select-options li").length];
    break;
case 40:
    nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) + 1) % $(this).find(".select-options li").length];
  break;
}
if(currentElement !== null) {
    $(currentElement).removeClass("selected");
}
if(nextElement !== null) {
    $(nextElement).addClass("selected");
}

});

Need also to adjust your css

.select-options li.selected {
  color: gray;
  background: #fff;
}

This is a working fiddle.

http://jsfiddle.net/sge8g5qu/

Thanks for this. There is just one thing -- when I open the menu with my mouse, hover above an item and then start pressing up and down, nothing happens (different LIs aren't selected). — Dave, Jan 02 '17 at 23:07
What is the expected behaviour and what browser are you using? Works for me on chrome 51 on linux. — james_bond, Jan 02 '17 at 23:23
In my original Fiddle, I was trying to detect if someone was already hovering over an element using "$(this).find('.select-options li:hover')" (this could be bad Jquery). Then pressing up or down would adjust their existing selection. You have $(this).find(".select-options li.selected"), which works if they got to the menu using the "Tab" key, but if they opened it with the mouse and then hovered over a selection using the mouse, pressing up or down doesn't do anything. — Dave, Jan 02 '17 at 23:37
Don't ever let anyone tell you that you're not the man b/c this answer is a work of genius! — Dave, Jan 03 '17 at 03:35
If you find my answer useful, please consider upvoting it and marking it as accepted. Thanks. — james_bond, Jan 03 '17 at 11:20

How do I apply a hover class to my element?

1 Answers1