[RESOLVED] list

[oo7ml]

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

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

.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

[bathurst_guy]

Your HTML is not nested correctly.

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

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

[oo7ml]

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

[bathurst_guy]

np