Blog de Livi » Javascript

Updated: Hover for non-anchor elements in IE6

livingston — Wed, 28 Apr 2010 20:03:33 +0000

The updated version of the previous version of Hover for non-anchor elements in IE 6.

Before proceeding further, here’s a brief description of the problem,

The ‘:hover’ pseudo-class works on all visual elements in IE 7+, FF, Safari, Chrome and Opera. But for obvious reasons IE 6 fails to recognize the ‘:hover’ pseudo-class for elements other than the anchor().

Here is the updated code, which is faster and is targeted only IE 6 by a combination of JavaScript conditional comments & feature detection.

    (function ($) {
        $(document).ready(function () {
            $.single=function(a){return function(b){a[0]=b;return a}}($([1]));
            /*@cc_on
                if (!window.XMLHttpRequest) {
                    $('.hoverable').each(function () {
                        this.attachEvent('onmouseenter', function (evt) { $.single(evt.srcElement).addClass('hovered'); });
                        this.attachEvent('onmouseleave', function (evt) { $.single(evt.srcElement).removeClass('hovered'); });
                    });
                }
            @*/
        });
    }(jQuery));

All you’ve to do is to include this script in your html document and add the class ‘hoverable’ to all the non-anchor elements to which you want the hover action. And in your stylesheet add an extra selector for the element along with the ‘:hover’ style definition. Look at the code of the updated example to get a clear idea.

I’ve used James Padolsey’s single jQuery object snippet in the event handlers to prevent the creation of a new jQuery object every time the event handler is executed, hence saving a few execution cycles and memory.

Hover for non-anchor elements in IE6

livingston — Wed, 20 Feb 2008 11:15:00 +0000

Updated article on Hover for non-anchor elements in IE6

The :hover pseudo-class adds a special style to an element when you mouse over it.

The ‘:hover’ pseudo-class works fine in IE7, FF, Safari and Opera for all the elements. But for obvious reasons IE6 fails to recognize the ‘:hover’ pseudo-class for all elements other than the anchor().

The ‘:hover’ pseudo-class can be made to work in IE6 with the help of the jQuery method ‘hover()’.

Lets see how it is done.

For each element that you want the ‘hover’ to be enabled add a class “hoverable” to it.


Hover Over Me!

In the CSS file define the style for the hovered state with a class “.hovered”.

   #theBox {
       width:200px;
       height:200px;
       background:#F1E592;
       margin:50px auto;
       border:5px solid #540505;
    }
   #theBox.hovered, #theBox:hover {
       width:200px;
       height:200px;
       background:#540505;
       border:margin:50px auto;
       border:5px solid #F1E592;
    }

Now the jQuery part, download the latest release of jQuery.js file from http://docs.jquery.com/Downloading_jQuery and include it in the head of the page as shown below,

Use the following code in between the ‘’ tags in your page to get the hover function in IE6.

This will work in all browsers. I’ve also added the ‘:hover’ pseudo-class to the CSS style so that the modern browsers can display the hover style even when JavaScript is disabled.

View the code in action at http://blog.delivi.com/examples/ie6-hover/.

safeMail : Anti-Spam Email with Unobtrusive Javascript

livingston — Sun, 02 Dec 2007 10:47:01 +0000

Title : safeMail
Version : 1.0
Language : Javascript
Author : Livingston Samuel
License :
Download : safeMail.js

If you’ve included your email address in your site then you’d definitely get junk mail that clogs your inbox. The Spam Bots and Spam Crawlers crawl through the web pages constantly and add all the email address they encounter to their lists.

I wanted a perfect solution to keep the Spam Bots away from my email address. I came across several solutions based on Javascript. But none of them was generalized, almost all of them I encountered used Javascript to insert the email address and each address needed to be coded individually. You can find a similar solution from Joe Maller

I wanted a solution that can generate the email address from an obscure form into a valid one on the fly, and thus resulted in safeMail.

The safeMail script uses DOM to scan the page and convert all the matching email entries into valid email links.

All you’ve to do is to download the ‘safeMail.js‘ file and include it in the header of the page where you’ve got one or more email address. The format you need to define the email address is,


	 yourname [at] gmail [dot] com

The script will replace this as ,


	 yourname@gmail.com

View the safeMail in action

If the browser does not support Javascript or if the user has disabled Javascript the email address will be in accessible format.

You are free to modify this code and please link back to this page. If you’ve any suggestions or found any errors or facing any problem in implementing the safeMail, post it in the comments and I’ll be very glad to help you. If you find a better solution please share it with me