鼠标悬停隐藏的背景图片 <ul><li> 标签

Question

I have simple HTML <ul> and <li> tabs with some CSS applied on jsfiddle here .

Basically, each tab has the format (please check the code linked above for more detail):

...
<li class="icons ...">
  <a href="#"></a>
<li>
...

As you saw in the code, the icon on each tab is actually the background image of each <li> element.

When the mouse hovers on a tab, I would like to also change the background color or background image of the <a> element. When I try to do this, mouse hover then hides the tab image ( <li> background-image). How can I get rid of it?

----------Another way to say my problem------------------------

What I mean is I have already had a background-image for <li> element, then I also want to have a background-image for <a> element which is contained by <li> , but if I did so (that's have both <li> and <a> has background-image with also :hover background-image ), the background-image of <a> will hide the background-image of <li> , how to get rid of this problem?

-------------Please check @ hradac 's reply, he understands my question correctly---------

Answer 1

Change the background-color of the LI containing your A instead.
That way your background-image won't be hidden by the A background-color.
See http://jsfiddle.net/Pq7LC/21/

Answer 2

Remove this part from your css:

a:hover
{
    color: #ffffff;
    background-color: #990000;
}

http://jsfiddle.net/ryZ4j/2/

Answer 3

From what I can gather you would like to have a background image in an <li> and a background image in an <a> contained in it. Your code does not have any background images for the contained <a> tags. All of your :hover switching happens on the <li> elements.

The problem seems to be a layering issue. When you apply a background color to the contained <a> tags you can no longer see the background image of the <li> it is on top of. The background images are still there, you just can't see them. I suggest changing the background color of the <li> on :hover and leaving the background color of the <a> on transparent. That way you can still see the <li> background image.

See an example here: http://jsfiddle.net/vzxGr/1/

Is this more like what you were looking for?