list

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>

HTML:

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

Code (markup):

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

 

First, rewrite your code. http://learningforlife.fsu.edu/webmaster/references/xhtml/tags/hypertext/a.cfm

li is not a valid child of a, so write this:

<ol class="details">
  <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>

Code (markup):

You can keep the div if you want but if it's just for styling, the ol can do it for you : )

CSS:

.details li {
  margin: 10px 0px 10px 0px;
  padding-left: 20px;
  background: url(../images/arrow.gif) left center no-repeat;
}
.details li:hover {
  background: url(../images/arrow_o.gif) left center no-repeat;
}
.details li a:link, .default li a:visited {
  color: #whatever it is by default;
}
.details li a:hover {
  color: #000;  (black)
}

Code (markup):

However this is clunky and WON'T work in IE6... so I wouldn't put the background image on the li. Instead I'd make the a a block element, equal to the height and width of the li, and give THAT the background image. Plus then it will work in IE6 (which only does :hover on a's).

.details li  {
  margin: 10px 0px 10px 0px;
  padding-left: 20px;
}
.details li a, .details li a:visited {
  display: block;
  height: 100%; (or whatever)
  width: 100%; (or whatever)
  color: #whatever the default colour is;
  background: url(../images/arrow.gif) left center no-repeat;
}
.details li a:hover {
  color: #000; (black)
  background-image: url(../images/arrow_o.gif);
}

Code (markup):

 

Wow, thanks a million, thanks for all your help, you went into great detail... much appreciated, cheers