在 Firefox 中的链接上调度“鼠标悬停”事件答案

【问题标题】：Dispatching 'mouseover' event on links in Firefox在 Firefox 中的链接上调度“鼠标悬停”事件
【发布时间】：2010-12-30 17:35:43
【问题描述】：

我一直在尝试在 Firefox 中调度事件，并注意到在链接上调度 mouseover 事件不会导致其样式更改为 :hover 中定义的样式CSS 类。调度 'click' 事件确实会将链接样式更改为 :active。这种行为有什么原因，或者我在代码中做错了什么？

var myElement = document.getElementById("myLink");
var ev = document.createEvent("MouseEvents");
ev.initMouseEvent("mouseover", canBubble, cancelable, view, 
                     detail, screenX, screenY, clientX, clientY, 
                     ctrlKey, altKey, shiftKey, metaKey, 
                     button, relatedTarget);
myElement.dispatchEvent(ev);

如果事件类型是click，它将执行该事件并将ev的样式更改为“:active”伪类中定义的样式。

我正在尝试制作一个可以记录屏幕事件然后回放的脚本。

更新：为 Firefox 找到 DejaClick。悬停在下拉菜单之类的东西上确实可以正常工作。

【问题讨论】：

请提供一些代码，没有更多信息很难帮助你

标签： css firefox javascript-events

【解决方案1】：

据我了解，您正在使用 java-script 来更改布局/显示。为什么不让 CSS 完成所有工作呢？如果可以，只需使用 :hover 类。但是，我假设您正在尝试完成非基于样式的事情。所以......也许你应该看看jQuery的hover event。或者可能是 this 之类的东西。

【讨论】：

感谢您的回答。是的，我正在尝试使用 JS 更改布局/显示，但在以后。

【解决方案2】：

您可以使用 jQuery 并根据需要操作链接，您可以更改 css、文本、位置、隐藏、添加效果，并使用它做您想做的事情。

示例：如果您想以相同的方式操作所有链接

 $("a").hover(  
  function () { //this function is executed on every link
    $(this).css('color','red')); //add css atributes (see css documentation)
    $(this).animate( { width:"90%"}, 1000 )  //add efects (see efects documentation)
  },      
 );

您还可以操作链接属性，并用它做很多事情。在 jQuery 文档中，您可以找到每个 jQuery docs 的工作示例（请参阅 jQuery API 参考）。

如果您不想在每个链接上的 Hover 上运行事件，您可以将其绑定到您想要的链接。例子：

//bind hover event to every link that match that id
$('#id_of_links').hover(function () { //manipulation } ); 
//bind hover event to every link that match that css class
$(".myClass").hover(function () { //manipulation } ); 
//bind hover event to every link by the text
$("a:contains('link_to_capture')").hover(function () { //manipulation } );

还有很多方法可以选择您要操作的链接，请参阅 jQuery 文档中的选择器部分。

【讨论】：