View Full Version : Css Link Block Hover Effect

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


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!

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



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