Question

我一直在尝试在Firefox中调度事件，并注意到在链接上调度鼠标悬停事件不会导致其样式更改为：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);

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

我正在尝试创建一个可以录制屏幕上事件然后播放它们的脚本。

更新：找到Firefox的DejaClick。将鼠标悬停在下拉菜单等功能上可以正常工作。

Answer 1

根据我的理解，您正在使用java脚本来更改布局/显示。为什么不让CSS做所有的工作？如果可以，只需使用：hover类。但是我假设你正在努力完成一些非基于风格的东西。所以...也许你应该研究jQuery的hover event。或者可能是this。

Answer 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文档中的选择器部分。

在Firefox中的链接上调度“mouseover”事件

2 个答案: