Home

CSS Examples Borderize links onMouseover

Date: 10/14/2004 Borderize links onMouseover

Author: CSS Drive

The goal of CSS link effects is often to draw attention to a link when the user hovers over it. Using the pseudo class "a:hover", this one applies a border to the target link, and for good measure, changes its background color as well. Notice how by setting the links to "display: block", the entire link area- and not just the text- becomes "active."

The HTML:

<div id="borderlinks">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
</div>

The CSS:

#borderlinks a{
padding-left: 4px;
display: block;
width: 150px;
color: black;
text-decoration: none;
border: 1px solid white;
}

#borderlinks a:hover{
border: 1px solid black;
background-color: lightyellow;
}

Comments (10)

Good post! Thanks for the info

#1: Nikola on 08/26 at 06:15 AM

Yeah. great post. thanks

#2: gratis on 09/04 at 02:56 PM

simple and useful.

#3: roses on 09/20 at 01:36 AM

Great one.I am using it : ) thanks
Games

#4: John on 11/21 at 05:59 AM

Wonderful article, thank you so much.

#5: videolar on 12/04 at 08:58 AM

Thanks, very simple and usable and it looks great too. I love css and what you can do with it. It is much simpler than using javascript which I have a lot of trouble understanding.
Acne Treatments

#6: Jake on 12/13 at 01:25 AM

I love how easily you can use CSS to get some really cool mouseover effects. Thanks for the useful tips - I love your site, keep up the great work. - Editor (Make Money Online Site)

#7: Jenny P. on 01/15 at 03:41 AM

Damnit I have been trying to find that code forever - thanks~

#8: Money on 02/24 at 10:22 PM

thanks css drive. you are best!

#9: emlak on 03/04 at 07:01 AM

nice and simple code thanks i was looking for this

#10: wayzee on 05/04 at 04:50 AM

NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

Hosting Coupon Code

Hostgator Hosting at $3.96/mon. Use CSS Drive exclusive coupon code "cssdrive25" for an additional 25% off

All images and content copyright © 2004-2014 CSS Drive. Contact Info | Back to Top