Mouse hover hides background image of <ul> <li> tabs
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 开发者_JAVA技巧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---------
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/
Remove this part from your css:
a:hover
{
color: #ffffff;
background-color: #990000;
}
http://jsfiddle.net/ryZ4j/2/
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?
精彩评论