Css Link Block Hover Effect

**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/archi...ock-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!

Code:

<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>

Thread: Css Link Block Hover Effect

Thread Tools

Search Thread

Css Link Block Hover Effect

Hope it will help ya!

Bookmarks

Bookmarks

Posting Permissions