Results 1 to 2 of 2

Thread: Css Link Block Hover Effect

  1. #1
    Join Date
    Dec 2005
    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 ( ) 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 - See the LINK GOODNESS section.

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


  2. #2
    Join Date
    Feb 2007
    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!
    <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>


Posting Permissions

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