Results 1 to 2 of 2

Thread: Css Link Block Hover Effect

  1. #1
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Css Link Block Hover Effect

    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

  2. #2
    Join Date
    Feb 2007
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Hope it will help ya!

    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>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •