When we left off last time, I showed you how to do simple link nudging with jQuery. In this post, I’ll show you how to add some more CSS styling, so if you haven’t read the previous article, I suggest you read it now before you continue.

The last snippet in the last article was this:

$(function() {
    $('a').hover(function() {
        $(this).stop().animate( {
            paddingLeft:"30px"
        }, 300);
    }, function() {
        $(this).stop().animate( {
            paddingLeft:"0"
        }, 300);
    });
});

Let’s first begin with some CSS. This is the CSS used in this demo:

a {
	color:#09f;
	padding-left:15px;
	display:block;
	background:#111;
	outline:none;
	text-decoration:none;
	border-bottom:1px dashed;
}
a:hover {
	color:#fff;
	padding-left:30px;
	background:#555;
	border-bottom:1px solid;
}

So now, what we need to do in the jQuery is to add the matching selectors to the hover, then ‘reset’ them on the blur.

$(function() {
    $('a').hover(function() {
        $(this).stop().animate( {
            paddingLeft:"30px",
            backgroundColor:"#555",
            borderBottom:"1px solid",
            color:"#fff"
        }, 300);
    }, function() {
        $(this).stop().animate( {
            paddingLeft:"15px"
            backgroundColor:"#555",
            borderBottom:"1px dashed",
            paddingLeft:"30px"
        }, 300);
    });
});

Hmm, unfortunately, the colours don’t seem to be working. Turns out, jQuery doens’t handle colors by default, and requires a plugin for this, the jQuery Color Plugin. Once you load that, it should work fine.

That’s it, see you next time!