Here is my HTML:
<li><a href=""><div class="arrow"></div>List Item</a></li>
I'm looking to change the background image of the "arrow" class when hovering over the "List Item" with a mouse. The "arrow" class represents a navigation image that appears in front of each list item.
Below is my CSS:
.arrow {
background: transparent url('../images/arrow.png') center center no-repeat;
width:16px;
height:16px;
float: left;
padding:0;
margin-right:1em;
}
.arrow:hover {
background: transparent url('../images/arrow_hover.png') center center no-repeat;
}