styling a link box

[raydona]

Hi,
I have seen link boxes where when the mouse hovers on top of the box the colour at the top half of the box changes but the colour at the bottom half remains unchanged. How can this be achieved using the command:
ul#List li a:hover
{ background:#ADFF2F;
}
I have tried using a background image to fill the bottom half but nothing seems to work. I would be very grateful if someone could provide me with a solution.

[alt131]

Hi raydona and welcome to WebmasterWorld ;)

I wonder if you have set the background image using background shorthand like:

ul#List li a {background: color url(myimage.jpg) bottom repeat-x}

If so, using background:#ADFF2F on hover removes the image and sets just a background colour. To change the background color but leave the image in place try:

ul#List li a:hover {
background-color:#ADFF2F;
}