:hover CSS 不工作？答案

【问题标题】：:hover CSS is not working?:hover CSS 不工作？
【发布时间】：2010-10-26 02:15:07
【问题描述】：

我创建了一个 CSS 类如下：

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

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

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

【问题讨论】：

标签： css browser hover

【解决方案1】：

我得到了答案，为什么 :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 标签后，如上所示，它对我有用。

感谢大家的帮助。

【讨论】：

你没有提到，你使用 :hover 在 div 上。这可能会有所帮助......但是，我从未听说过 Doctype 对这个有影响。
这也为我们解决了问题。谁能解释为什么这可以解决问题？
这在下面链接w3schools.com/cssref/sel_hover.asp的W3Schools教程中明确提到了

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

我已经使用 WEB Developer 工具栏（firefox 扩展）检查了属性，第一页显示 .ycontent 和 .ycontent:hover 属性，但对于其他页面，它只显示 .ycontent 类而不是.ycontent:hover 类 ??

【解决方案4】：

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

【讨论】：

我知道，这就是我在问题中提到 IE7+ 的原因。

【解决方案5】：

我同意布兰登。

我也会补充..

如果您删除：

div.ycontent

您的行中的部分，如下所示：

.ppclisting { 
background-color:#cccccc; 
}

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

您可能会发现它适用于您的其他页面。

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

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

【讨论】：

是的，这是他现在应该有的情况，其他页面没有 div.ycontent 元素 V-UP
所有页面都有 .ycontent 类的 div

【解决方案6】：

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

【讨论】：

你写的正是我输入的内容；）

【解决方案7】：

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

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

【讨论】：