CreateOpen

Ever wanted your menus to fade when you mouse over them? With jQuery, copy this code into your page and run it when the DOM is ready (That means wrapping it with $(function(){ ... }); to use jQuery’s $(document).ready() function).

Replace #nav li below with whatever your navigation items are.

$("#nav li").hover(function(){ //add an event listener for hover on the li nodes
$(this).fadeOut(0); // fade them to white immediately
},function(){
$(this).fadeIn("slow"); // fade them to their original color our mouse out
});

To extend this, you could use the jQuery animate function, along with the color plug in to just fade the background color and not the text itself.

Here’s a rough guide on making a bookmarklet to change the images in a page on hover. This looks for images with “without” in the src and replaces them with “with”. For example, <img src="a-without.jpg"> becomes <img src="a-with.jpg">. This is useful for testing new versions of an image on a page.
First, the jQuery:

jQuery("img[@src*=without]").hover(
  function(){
    withLink=jQuery(this).attr("src").replace('without','with');
    jQuery(this).attr("src",withLink);
  },
  function(){
    withOutLink=jQuery(this).attr("src").replace('with','without');
    jQuery(this).attr("src",withOutLink);
  }
);

Second, wrap it in javascript:(function(){ … })() and remove the
whitespace:

javascript:(function(){jQuery("img[@src*=without]").hover(function()
{withLink=jQuery(this).attr("src").replace('without','with');jQuery(this).attr("src",withLink);},function()
{withOutLink=jQuery(this).attr("src").replace('with','without');jQuery(this).attr("src",withOutLink);})})
()

Save this as a bookmark and click on it on any page with jQuery.