Block hover effect for a list of links
February 24, 2008
The HTML is quite straightforward. Because IE only supports the :hover element for links, the link anchor needs to go around all the text in the list item. Therefore, we need to provide some additional hooks in order to style the content. We do this through the use of <em> and <span> tags.
<div class="hov"> <ul> <li><a href="#" title="Text">AssistProgramming.com <em>Programming Tips & Tricks</em> </a> </li> <li><a href="#" title="Text">AssistProgramming.com <em>Programming Tips & Tricks</em> </a> </li> <li><a href="#" title="Text">AssistProgramming.com <em>Programming Tips & Tricks</em> </a> </li> </ul> </div>
And now the CSS. In order for the block hover effect to work properly in IE, we need to make the width of the link the same as that of the list item. Otherwise the hover effect will only display when you mouse over the text within the list item.
.hov ul {list-style-type: none;width: 400px;}.hov li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
.hov li a {
color:#d00000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #links li a {
width: 400px;
}
.hov li a:hover {
background-color:#f4e9f1;
}
.hov a em {
color:#000066;
display: block;
font: bold 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
Here is the source. Just download and see how it works 
Post a comment
RSS/XML