:hover CSS 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/861745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
:hover CSS is not working?
提问by Prashant
I have created a CSS class as follows:
我创建了一个 CSS 类，如下所示：
div.ycontent div.ppclisting { background-color:#cccccc; }
div.ycontent div.ppclisting:hover { background-color:#FFE5DF; }
I have applied the above style in one of my page, which is working quite fine in Firefox, IE 7.0+ and in other latest browsers. But When I am applying the same style in another page then its not working.
我在我的一个页面中应用了上述样式，它在 Firefox、IE 7.0+ 和其他最新浏览器中运行良好。但是当我在另一个页面中应用相同的样式时，它不起作用。
Can anyone tell me what could be the reason? why its not working in another page.
谁能告诉我可能是什么原因？为什么它在另一个页面中不起作用。
回答by Prashant
I got the answer why the :hover was not working on another page. Actually on second page the DOCTYPE tag was not added in the HTML page as below,
我得到了为什么 :hover 在另一个页面上不起作用的答案。实际上在第二页上，DOCTYPE 标签没有添加到 HTML 页面中，如下所示，
<!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">
Earlier it was simple <html>tag and due to which :hover on the div was not working. After adding doctype tag as shown above its working for me.
早些时候它是简单的<html>标签，因此 :hover 在 div 上不起作用。添加如上所示的 doctype 标签后，它对我有用。
Thanks to all of you for help.
感谢大家的帮助。
回答by brian
Just had a similar problem. Make sure you're stacking correctly! That is, the z-index.
刚刚遇到了类似的问题。确保您正确堆叠！即z-index。
回答by David says reinstate Monica
If it's working in one place, but not another place, then either it's not being called correctly or it's not being applied correctly.
如果它在一个地方工作，而不是另一个地方，那么要么没有正确调用它，要么没有正确应用它。
Use Firebug, and see what properties the element that shouldhave the styles really have. Then check the classnames for typos. Usually, that'll solve the problem as described.
使用 Firebug，看看应该具有样式的元素真正具有哪些属性。然后检查类名是否有拼写错误。通常，这将解决所描述的问题。
回答by alex
Also, in IE6, :hoveronly works with aelements. Keep that in mind.
此外，在 IE6 中，:hover仅适用于a元素。记在脑子里。
回答by Lycana
I am in agreeance with Brandon.
我同意布兰登的意见。
I will also add..
我也来补充。。
If you remove the:
如果删除：
div.ycontent
section from your lines, such that it looks like this:
行中的部分，使其看起来像这样：
.ppclisting {
background-color:#cccccc;
}
.ppclisting:hover {
background-color:#FFE5DF;
}
You may find it will work on your other page.
您可能会发现它可以在您的其他页面上使用。
Why? Because you have defined these styles as 'classes'. Classes intend to apply the same style numerous times.
为什么？因为您已将这些样式定义为“类”。类打算多次应用相同的风格。
By placing the "div.ycontent" before it, you are essentially 'restricting'/ not utilising the pull potential of CSS classes.
通过将“div.ycontent”放在它之前，您实际上是在“限制”/没有利用 CSS 类的拉动潜力。
回答by Lycana
Maybe the nested div in the other page doesn't have the class ycontent and/or the element itself isn't class ppclising?
也许另一个页面中的嵌套 div 没有类 ycontent 和/或元素本身不是类 ppclising？
回答by user3424554
I just had position:absolute on a parent break my :hover's, although it doesn't seem to be an issue as a grandparent. I'm new to all of this so I don't know if that's normal or not.
我只是在父母的位置：绝对打破了我的：悬停，尽管作为祖父母这似乎不是问题。我对这一切都很陌生，所以我不知道这是否正常。
Amendment: This turned out to be a z-index issue for me. I needed to put -1 on the parent, 0 on any siblings with position specified and 1 on the divs I wanted hover activity for.
修正：这对我来说是一个 z-index 问题。我需要在父级上设置 -1，在指定位置的任何兄弟姐妹上设置 0，在我想要悬停活动的 div 上设置 1。
