jQuery: Make a SPAN visually act Like an ANCHOR CodeUnit 22 MAY 2009

Coffee CupSometimes you just don’t want to use the good old anchor tag and want to use a tag instead, but at the same time, you want people who mouse-over your span tag think that it is in fact an anchor tag. Of course, this means that visually your span should now react exactly as an anchor tag would but unfortunately for you, assigning the :hover attribute to just any old CSS class definition just doesn’t hold up across all browsers.

So how could you do this then?

Well a nice solution is to make use of the jQuery library and use its inbuilt event triggers to do everything for you. So let’s have a look at achieving this then:

Firstly, set up your CSS appropriately:

a {
color: #6A801B;
text-decoration: none;
}

a:hover {
color: #4C9314;
text-decoration: underline;
}

.deluserspan {
cursor: pointer;
color: #6A801B;
text-decoration: none;
}

.deluserspan_hover {
cursor: pointer;
color: #4C9314;
text-decoration: underline;
}

You’ll notice that I’ve mimicked my anchor style definitions in my deluserspan declaration, the only difference being that I’ve added the cursor: pointer; definition to my span’s declaration. (Also, note that in order to make things easier to remember/understand, I’ve gone and named my fake “hover” span declaration with the word ‘hover’ in it’s name.)

Now on to the actual code itself. In your HTML, you’ll now go and declare something like this, the end result being a line reading Delete User that looks like an anchor tag. However, hovering over it doesn’t do a thing apart from changing the cursor to a pointer:

Delete User

So how do we get it to visually react like we want it to? Well the trick is to change the span’s class from the standard deluserspan to the deluserspan_hover class, and this we get to do by utilizing jQuery’s hover event trigger. So in code, what we need to add is:

$(“.deluserspan”).hover(function() {
$(this).attr(‘class’,’deluserspan_hover’);
},function(){
$(this).attr(‘class’,’deluserspan’);
});

Digging through this snippet you’ll see that all we are doing is waiting for the hover event to trigger from the original span and once it has, change its class attribute to that of the deluserspan_hover class using the jQuery attr function. However, we’re not quite done at this point because we obviously need to deal with the situation that arises when the user moves his mouse off the currently highlighted span. Luckily for us though, the hover function comes with a chained callback mouse-out event and so in the second part of the hover function, we get to reassign the original class back to the span.

And that’s it. Your span now visually behaves just like an anchor would, allowing you to now fully make use of the span in a way which is consistent in presenting clickable areas to an end user.

Related link: http://docs.jquery.com/Events/hover#overout

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.