javascript - 为什么悬停事件不能与 Bootstrap 选项卡上的 jquery 方法一起使用？

Question

关于bootstrap tabs documentation page我尝试了以下代码:

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

当选项卡获得焦点时会显示警报，但当我将鼠标悬停在选项卡上时不会显示警报。我的问题是:

• 为什么悬停事件不能与 Bootstrap 选项卡上的 on jquery 方法一起使用？

Answer 1

这不起作用的两个原因

1) alert() 在网站上被禁止

2) .on('hover') 已弃用。

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.

尝试此代码以查看您想要的结果。

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

这确实有效，只是不适用于 alert 方法。尝试使用替代方法，在网站允许的屏幕上弹出一些内容。