html文本链接悬停背景图片答案

【问题标题】：html textual link hover background imagehtml文本链接悬停背景图片
【发布时间】：2011-10-27 15:55:41
【问题描述】：

div里面有一个背景。然后我会写一个链接列表，然后传递背景图像，但它似乎不起作用。

如果链接位于背景图像上方，将鼠标悬停在其上，我不会像所有其他不在图像背景上方的链接那样得到文本的下划线。

这是我的代码：

<div style="min-height:200px;">
  <div class="backgroundImg"
      style="background: url(/my/url.png) no-repeat; height:140px; width: 140px;position: absolute;>
  </div> 
  <div style="z-index:30">
    <a href="#">My link here</a>
  </div>
</div>

对不起我的英语，这个概念真的很容易理解但很难解释......我希望能够解释。

谢谢大家，达尼洛

编辑：

我发现了错误……如果你在 div 中不使用“绝对”属性，z-index 不起作用。

感谢您的建议！ ;-)

【问题讨论】：

尝试在JsFiddle 上发布一个示例 - 这将更容易理解您要做什么！
请发布您自己的答案并接受它，这样问题就会被关闭。它也可能为您赢得一些支持。

标签： html css hyperlink hover

【解决方案1】：

很难理解，但我会尝试：

1) 如果您在 div 上方有一个带背景的链接，请尝试在链接上使用不同的 z-index 值或在链接上设置一个 paddin，这样 div 就会下降，您会看到下划线。

2) 如果您想在图像背景上添加一个列表，请将其插入到带有背景的 div 中。

【讨论】：

我属于第一种情况。使用 z-index 不起作用。 “在 paddin 设置”是什么意思？
对不起，它是在链接上“设置填充底部”：使用此属性，带背景的 div 将下降，您将看到下划线。

【解决方案2】：

我发现了错误……如果你在 div 中不使用“绝对”属性，z-index 不起作用。

感谢您的建议！ ;-)

【讨论】：