[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