:hover CSS 不起作用?

发布于 2024-07-20 06:59:20 字数 308 浏览 7 评论 0原文

我创建了一个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

深白境迁sunset 2024-07-27 06:59:20

我得到了为什么 :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">

之前它是简单的 标记,因此 :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,

<!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.

Thanks to all of you for help.

别把无礼当个性 2024-07-27 06:59:20

刚刚有类似的问题。 确保堆叠正确! 即 z 索引。

Just had a similar problem. Make sure you're stacking correctly! That is, the z-index.

千紇 2024-07-27 06:59:20

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

使用 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.

忆梦 2024-07-27 06:59:20

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

Also, in IE6, :hover only works with a elements. Keep that in mind.

信愁 2024-07-27 06:59:20

我同意布兰登的观点。

我还将添加..

如果您

div.ycontent 

从行中删除:部分,使其看起来像这样:

.ppclisting { 
background-color:#cccccc; 
}

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

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

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

通过在其前面放置“div.ycontent”,您实际上是在“限制”/不利用 CSS 类的拉动潜力。

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.

空城缀染半城烟沙 2024-07-27 06:59:20

也许其他页面中的嵌套 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?

[浮城] 2024-07-27 06:59:20

我刚刚在父母身上使用了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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文