文字装饰下划线在绝对位置后不起作用

Question

http://jsfiddle.net/ZPNxh/2/

当我绝对定位覆盖层时，h3上的悬停（下划线）不起作用（尽管A标记包装了所有内容）。

当它正常定位时，下划线就像魅力一样。

我试着玩z-index，徒劳无功

有什么想法吗？

Answer 1

首先，a标记是内联元素，h3标记是块元素！您无法将h3标记放在a标记内。因此，首先删除a标记，然后将其设置为div之类的其他块级元素。

:hover伪类在IE 6上不适用于a标记。因此，如果您使用div标记并将其定位为div:hover，则该标记适用于所有浏览器，但IE 7以外的浏览器除外。

但是，如果你想使用相同的标记，请添加：

a {display: block;}

这样，它将它呈现为块元素，而不是内联元素，保持h3和div！

预览

另一种最佳方法是添加border-bottom: 2px solid;而不是text-decoration！