zurielbarron.com

One jQuery feature that I’ve always wished was part of Prototype is the hover function. The hover function takes in two parameters: the first one is a function for when the mouse starts to hover over the desired element, and the second one is a function for when the mouse leaves the element:

$("#hover-element").hover(
  function() {
    $(this).addClass('my-hover');
  },
  function(){
    $(this).removeClass('my-hover');
  }
);

This is very simple and allows for hover effects on any html element (Important since IE is unable to apply the :hover style to elements other than links). You definitely can do the same using Prototype, but you have to use the mouseover and mouseout events.

$("hover-element").observe('mouseover', function() {
  this.addClassName('my-hover');
});
$("hover-element").observe('mouseout', function() {
  this.removeClassName('my-hover');
});

It’s not pretty syntax but it works. These two techniques, however, have one major difference between them.  jQuery’s hover method will only fire ONCE when you enter (mouseover) the desired item, even if it has multiple CHILDREN objects. Using Prototype’s observe method, the mouseover and mouseout events will fire MULTIPLE times if the object you are hovering over has multiple children; firing every time as you mouse over each one of them.  This is not a big deal if you are doing something simple like adding a class name to the object. In fact you might not even notice it since it happens so fast, but this is a big problem if you are trying to do something more complicated, like triggering an animation. I found this out while trying to create a simple animated drop-down menu for a website I was building (tutorial coming soon) and had a hard time figuring out what to do. I though about porting jQuery’s hover method to prototype and almost started doing it when I found this:

Protohover: a simple hover plugin for the prototype.js library

Luckily, it seems like someone read my mind and already did me the favor. It works exactly as you would expect. Just add the js file to your website and your syntax should be very similar to jQuery’s:

$("hover-element").hover(
  function(event) {
    $(this).addClass('my-hover');
  },
  function(event){
    $(this).removeClass('my-hover');
  }
);

I love me some Google.