Css Link Block Hover Effect [Archive]

benzine

03-07-2007, 05:16 AM

Hi Everyone,

I'm trying to do a block hover effect and came to this tutorial ( http://www.smileycat.com/miaow/archives/link-list-block-hover.html ) but this isn't what what looking for.

I'm trying to achieve a hover on the div in such a way that links in the block itself can be selected and have their own hover as depicted on http://www.methodarts.com/default.htm - See the LINK GOODNESS section.

Can someone pls lighten me up on this issue....

Thanks
Ben

slava

03-09-2007, 10:56 PM

i've tryed to do something for ya, but i'm not sure i understood you right.

try this code i've wirtten for you and see if it fits your needs!

<html>
<head>
<title>
</title>
<style type="text/css">
#hoverlink {
width: 300px;
padding: 0;
margin: 5px;
}
#hoverlink ul {
list-style-type: none;
}
#hoverlink ul li {
border: 1px dotted gray;
border-width: 1px 0;
margin: 5px 0;
}
#hoverlink ul li a {
text-decoration: none;
background-color: black;/*set the color you want*/
color: red;/*set the color you want*/
display: block;
padding: 5px;
}
* html #hoverlink li a {
width: 300px;
margin: 5px 0;
}
#hoverlink a:hover {
background-color: yellow;/*set the color you want*/
}

</style>

</head>
<body>

<div id="hoverlink">
<ul>
<li><a href="link.html"><h3>Something</h3>
<p>And here comes the text you need to link</p></a>
</li>
<li><a href="link2.html"><h3>Something New</h3>
<p>Something you want to link to</p></a>
</li>
</ul>
</div>

</body>