Question

我有简单的 HTML <ul>和<li>标签，其中 CSS 已应用on jsfiddle here。

基本上，每个标签都有格式（请查看上面链接的代码以获取更多详细信息）：

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

正如您在代码中看到的那样，每个标签上的图标实际上是每个<li>元素的背景图片。

当选项卡上的鼠标悬停时，我还想更改<a>元素的背景颜色或背景图片。当我尝试这样做时，鼠标悬停然后隐藏标签图片（<li> background-image）。我怎么能摆脱它？

----------说出我的问题的另一种方式------------------------

我的意思是我已经有background-image <li>元素，然后我还希望background-image元素<a> <li>，但如果我这样做（<li>和<a>同时background-image同时:hover background-image），background-image的{{1}}会隐藏<a> background-image，如何摆脱这个问题？

-------------请查看@ hradac的回复，他正确理解我的问题---------

Answer 1

更改包含A的LI的背景颜色这样，您的背景图像将不会被A背景颜色隐藏见http://jsfiddle.net/Pq7LC/21/

Answer 2

从css中删除此部分：

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

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

Answer 3

根据我的收集，您希望在<li>中包含背景图像，并在其中包含<a>中的背景图像。您的代码没有包含<a>标记的任何背景图片。您的所有:hover切换都发生在<li>元素上。

这个问题似乎是一个分层问题。将背景颜色应用于包含的<a>标记时，您将无法再看到它所在的<li>的背景图像。背景图片仍在那里，你只是看不到它们。我建议更改<li>上:hover的背景颜色，并将<a>的背景颜色保持透明。这样您仍然可以看到<li>背景图片。

请在此处查看示例：http://jsfiddle.net/vzxGr/1/

这更像你在寻找什么？

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

3 个答案: