Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

styling a link box



11:38 pm on Nov 25, 2010 (gmt 0)

5+ Year Member

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.


12:59 am on Nov 26, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

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 {

Featured Threads

Hot Threads This Week

Hot Threads This Month