user31782 user31782 - 1 month ago 9
HTML Question

Why doesn't hover event work with on jquery method on bootstrap tabs?

On the bootstrap tabs documentation page I tried the following code:

$(".nav-tabs > li > a").on("hover focus", function(){
alert();
});


The alert is shown when the tabs get focus but not when I hover over them. My question is:


  • Why doesn't hover event work with
    on
    jquery method on bootstrap tabs?


Answer

Two reasons why this is not working

1) alert() is being suppressed on the website

2) .on('hover') is deprecated.

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

Try this code to see your desired result.

$(".nav-tabs > li > a").on("mouseover focus", function(){ 
  console.log("hello");
});

This does work, just not with the alert method. Try an alternative to get something to pop up on the screen that the website will allow.