Dispatching 'mouseover' event on links in Firefox

Question

I have been experimenting with dispatching events in Firefox and noticed that dispatching the mouseover event on a link does not cause its style to change to that defined in the :hover CSS class. Dispatching the click event does change the link style to :active. Any reason for this behavior or I am doing something wrong in my code?

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);

If the event type is click it will execute the event and change ev's style to one defined in :active pseudo-class.

I am trying to make a script which can record on-screen events and then play them back.

Update: Found DejaClick for Firefox. The hover on things like drop down menus does work properly.

Answer 1

Well from what i understand, you are using java-script to change the layout/display. Why not let CSS do all the work? If you can, simply use the :hover class. I assume however, you are trying to accomplish something non-style based. so... maybe you should look into jQuery's hover event. Or possibly something like this.

Answer 2

you can use jQuery , and manipulate the link as you want, you can change the css, text, position, hide, add efects, and do what you want with it.

Example: if you want to manipulate all links in the same way

 $("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)
  },      
 );

you can also manipulate the link atributes, and do a lot of thing with it. In the jQuery documentation you can find working examples of each, jQuery docs ( see the jQuery API Reference ).

If you don't want to run the event on Hover on every link , you can bind it to the links that you want. Examples:

//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 } ); 

And there are a lot of ways to select the link you want to manipulate, see the Selectors section in jQuery docs.