www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] list

  1. #1
    Join Date
    Jul 2006
    Posts
    657

    resolved [RESOLVED] list

    Hi, i have an ordered list that has 4 links listed

    HTML Code:
    <div class="details">
    	     <ol>
    		   <a href="#"><li>link 1</li></a>
    	           <a href="#"><li>link 2</li></a>
                       <a href="#"><li>link 3</li></a>
    	           <a href="#"><li>link 4</li></a>
    	     </ol>
    	    </div>
    My CSS for the class is:

    Code:
    .details li 
    	{
    	margin: 10px 0px 10px 0px;
    	padding-left: 20px;
    	background-image: url(../images/arrow.gif);
    	background-position: left center;
    	background-repeat: no-repeat;
    	}
    However i want to add a hover effect on the list links so that the background arrow will change to arrow_o (different colour arrow) and that the text will change to black. Please can anyone help me with this code, thanks in advance

  2. #2
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357
    Your HTML is not nested correctly.
    Code:
    <div class="details">
    	     <ol>
    		   <li><a href="#">link 1</a></li>
    	           <li><a href="#">link 2</a></li>
                       <li><a href="#">link 3</a></li>
    	           <li><a href="#">link 4</a></li>
    	     </ol>
    	    </div>
    Then the CSS can be:
    Code:
    .details li a
    	{
    	margin: 10px 0px 10px 0px;
    	padding-left: 20px;
    	background-image: url(../images/arrow.gif);
    	background-position: left center;
    	background-repeat: no-repeat;
    	}
    .details li a:hover
    	{
    	background-image: url(../images/arrow_o.gif);
    	color: black;
    	}

  3. #3
    Join Date
    Jul 2006
    Posts
    657
    thanks a million, although i did have to make one change to your code:

    .details li
    {
    margin: 10px 0px 10px 0px;
    }

    .details li a
    {
    padding-left: 20px;
    background-image: url(../images/arrow.gif);
    background-position: left center;
    background-repeat: no-repeat;
    text-decoration:none;
    color:#FFFFFF;
    }

    .details li a:hover
    {
    background-image: url(../images/arrow_o.gif);
    color:#FFC600;
    }


    I can't believe how i had nested my code, thanks again for your help

  4. #4
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357
    np

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles