css - :hover CSS 不工作？

Question

我创建了一个 CSS 类，如下所示：

div.ycontent div.ppclisting { background-color:#cccccc; }
div.ycontent div.ppclisting:hover { background-color:#FFE5DF; }

我在我的一个页面中应用了上述样式，它在 Firefox、IE 7.0+ 和其他最新浏览器中运行良好。但是当我在另一个页面中应用相同的样式时，它就不起作用了。

谁能告诉我可能是什么原因？为什么它不能在另一个页面中工作。

score 17 · Accepted Answer

我得到了答案，为什么 :hover 不能在另一个页面上工作。实际上在第二页的 HTML 页面中没有添加 DOCTYPE 标签，如下所示，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

早些时候它是简单的<html>标签，因此 :hover 在 div 上不起作用。添加 doctype 标签后，如上所示，它对我有用。

感谢大家的帮助。

score 3 · Accepted Answer

3

刚遇到类似的问题。确保您正确堆叠！也就是z-index。

于 2011-05-16T22:32:16.077 回答

score 2 · Accepted Answer

如果它在一个地方工作，但不在另一个地方工作，那么要么它没有被正确调用，要么它没有被正确应用。

使用 Firebug，并查看应该具有样式的元素真正具有的属性。然后检查类名是否有错别字。通常，这将解决所描述的问题。

score 2 · Accepted Answer

2

此外，在 IE6 中，:hover仅适用于a元素。记住这一点。

于 2009-05-14T06:07:12.900 回答

score 1 · Accepted Answer

我同意布兰登的观点。

我还要补充。。

如果您删除：

div.ycontent

从您的行中提取部分，使其看起来像这样：

.ppclisting { 
background-color:#cccccc; 
}

.ppclisting:hover { 
background-color:#FFE5DF; 
}

您可能会发现它可以在您的其他页面上使用。

为什么？因为您已将这些样式定义为“类”。课程打算多次应用相同的样式。

通过将“div.ycontent”放在它之前，您实际上是在“限制”/没有利用 CSS 类的拉动潜力。

score 0 · Accepted Answer

0

也许其他页面中的嵌套 div 没有类 ycontent 和/或元素本身不是类 ppclising？

于 2009-05-14T06:00:16.850 回答

score 0 · Accepted Answer

我只是有位置：绝对的父母打破了我的：悬停，尽管这似乎不是祖父母的问题。我对这一切都很陌生，所以我不知道这是否正常。

修正：这对我来说是一个 z-index 问题。我需要将 -1 放在父级上，将 0 放在任何指定位置的兄弟姐妹上，并将 1 放在我想要悬停活动的 div 上。

css - :hover CSS 不工作？

7 回答 7

Related

Reference