:hover CSS 不起作用?
我创建了一个 CSS 类,如下所示:
div.ycontent div.ppclisting { background-color:#cccccc; }
div.ycontent div.ppclisting:hover { background-color:#FFE5DF; }
我已在我的一个页面中应用了上述样式,该样式在 Firefox、IE 7.0+ 和其他最新浏览器中运行得很好。 但是当我在另一个页面中应用相同的样式时,它不起作用。
谁能告诉我可能是什么原因? 为什么它在另一个页面中不起作用。
I have created a CSS class as follows:
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.
Can anyone tell me what could be the reason? why its not working in another page.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
我得到了为什么 :hover 在另一个页面上不起作用的答案。 实际上,在第二页上,DOCTYPE 标记没有添加到 HTML 页面中,如下所示,
之前它是简单的
标记,因此 :hover 在 div 上不起作用。 添加如上所示的 doctype 标签后,它对我有用。
感谢大家的帮助。
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,
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.Thanks to all of you for help.
刚刚有类似的问题。 确保堆叠正确! 即 z 索引。
Just had a similar problem. Make sure you're stacking correctly! That is, the z-index.
如果它在一个地方工作,但在另一地方工作,那么要么它没有被正确调用,要么它没有被正确应用。
使用 Firebug,查看元素应该真正具有哪些样式属性。 然后检查类名是否有拼写错误。 通常,这将解决所描述的问题。
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 should have the styles really have. Then check the classnames for typos. Usually, that'll solve the problem as described.
另外,在 IE6 中,
:hover
仅适用于a
元素。 记住这一点。Also, in IE6,
:hover
only works witha
elements. Keep that in mind.我同意布兰登的观点。
我还将添加..
如果您
从行中删除:部分,使其看起来像这样:
您可能会发现它可以在您的其他页面上使用。
为什么? 因为您已将这些样式定义为“类”。 课程打算多次应用相同的风格。
通过在其前面放置“div.ycontent”,您实际上是在“限制”/不利用 CSS 类的拉动潜力。
I am in agreeance with Brandon.
I will also add..
If you remove the:
section from your lines, such that it looks like this:
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 类和/或元素本身不是 ppclising 类?
Maybe the nested div in the other page doesn't have the class ycontent and/or the element itself isn't class ppclising?
我刚刚在父母身上使用了position:absolute,打破了我的:hover,尽管作为祖父母,这似乎不是问题。 我对这一切都很陌生,所以我不知道这是否正常。
修正:这对我来说是一个 z-index 问题。 我需要在父级上放置 -1,在指定位置的任何同级上放置 0,在我想要悬停活动的 div 上放置 1。
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.