Blogging Tips

Link Block Hover Effect

Written by John Leschinski from Leschinski Design

It’s a fairly common trick used nowadays, a block of text with a title and some other information that acts as a link while the only thing that looks like a link in the block is the title. It doesn’t require any fancy tricks even, but it’s probably not the most semantic bit of code.

Check out the demo here.

The key is simply wrapping the entire block in the link, and then styling the rest of the content to not look like a link.

<li>
<a href="http://www.bloggingtips.com/" >Reduce your code.
<span>12 Jul 2008</span>

<p>Complex designs are quite often a mess of div’s and span’s, it’s not surprising some people are sticking to tables, but unless they have a time machine tables are not the answer, remember it’s CSS or die!</p>

</a>

</li>

You can then style the span and the paragraph elements.

.h-links ul {
list-style-type: none;
width:450px;
margin:0; padding:0;
}

.h-links li {
border-bottom:1px dotted #777;
}

.h-links span{
font-size:0.75em;
color:#777;
font-weight:normal;
}

.h-links p{
margin:5px 0 0 0; padding:0;
color:#000;
font-weight:normal;
}

.h-links li a {
color: #CC0033;
text-decoration: none;
font-weight:600;
display:block;
padding: 15px 15px 15px 10px;
}

.h-links li:hover{
background: #eee;
}

When you hover over the block, it will highlight and you’ll be able to click anywhere in the block.
Grab the full code example and play around with it yourself.

Written by John Leschinski from Leschinski Design
Posted on July 19th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

7 Responses to “Link Block Hover Effect”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

Dan Schulz says:

July 19, 2008 at 8:31 pm

While it’s a neat “trick” it’s actually invalid HTML since block-level elements (such as paragraphs) cannot be embedded inside inline ones (like links for example). For those (such as myself) who actually care about well-formed and valid markup, this is going to be a major /FAIL/ not to mention a turn-off.
John Leschinski says:

July 19, 2008 at 8:35 pm

Ya, I did mention it’s not semantic code. However it does work in Safari, IE, and FireFox. The idea that everything has to be 100% valid code is a great idea, but I’m fine with bending the rules to achieve acctual results.
Myo Kyaw Htun says:

July 19, 2008 at 8:38 pm

Give + point to Dan and li:hover doesn’t work in IE6.
John Leschinski says:

July 19, 2008 at 8:42 pm

I don’t care about supporting IE6, with IE8 already on it’s way. IE6 users should expect at this point to be treated to a less polished web if they refuse to upgrade.
Dan Schulz says:

July 19, 2008 at 8:58 pm

I said invalid, not non-semantic. There is a difference between the two. As for the lack of support for :hover on non-anchor elements in IE 6 and earlier, that can be taken care of with Peter Nederlof’s csshover.htc file, the proprietary behavior: style property, and a single line in a .htaccess file (to set the correct MIME type for .hta and .htc files).
Dan Freakley says:

July 20, 2008 at 4:22 pm

I too think it’s flawed with the invalid HTML. Though I like the work-around, and wouldn’t encourage you to stop trying things like this.

Trackbacks

links for 2008-07-26 : A Girl And Her Blog says:

July 25, 2008 at 11:36 pm

[...] Link Block Hover Effect link, and then styling the rest of the content to not look like a link. [...]