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

时间:2012-07-05 10:22:49

标签: html css positioning css-position

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

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

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

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

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

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

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

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

a {display: block;}

这样,它将它呈现为块元素,而不是内联元素,保持h3div

预览

enter image description here

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