Question

嘿，我正在尝试使用CSS悬停类，它在Chrome上运行良好但在Firefox上运行不正常。任何帮助赞赏。这是我的CSS：

.albumbox .labeltext {
    visibility: hidden;
}

.albumbox:hover .labeltext {
    visibility: visible;
}

这是相关的HTML：

<a href="http://open.spotify.com/album/2tG6kmDtT5rysmQAtzm5UW" target="_blank"><div class='albumbox'>

<img height="200px" width="200px" src="http://userserve-ak.last.fm/serve/300x300/9351489.jpg" />

<span class='album labeltext'>Escape The Fate<br>Escape The Fate</span>

</div></a>

如果您想查看整个页面，请在此处查看http://fyspotify.appspot.com

由于汤姆

Answer 1

那是因为你在内联元素中有块级元素，也就是说，你在<div>内有一个<a>，并且Firefox选择以不同于Chrome的方式呈现这一点，因为行为未指定。

最简单的补救措施是使用span而不是div，无论哪种方式，你都不能在内联元素中包含块级元素，并期望它在所有浏览器上都能正常工作。

Answer 2

最迫切的原因是您的网页正在Quirks Mode呈现。

将此（HTML5 doctype）添加为源代码中的第一行，我相信它会自动运行：

<!DOCTYPE html>

Answer 3

我认为这是因为只有<a>个标签在CSS中包含 :hover 事件。为什么不将这些链接命名为“class albumbox”并通过CSS将其设置为 display:block; ？

结果是一样的，但可能会更“符合”！

Hover CSS仅适用于Chrome

3 个答案: