如何使用 CSS 和 HTML 获得“悬停”和“活动”状态？

Posted 2023-05-08

【中文标题】如何使用 CSS 和 HTML 获得“悬停”和“活动”状态？

【英文标题】：How to get 'hover' and 'active' states working with CSS and HTML?

【发布时间】：2012-11-18 21:04:05

【问题描述】：

我的网站顶部的标题中有 3 个菜单项（它目前不可用，所以我无法提供链接 - 抱歉）。这 3 个“按钮”不是 CSS 按钮意义上的按钮 - 它们是呈现为图像的文本（不理想，我知道但它们看起来很漂亮，所以......）。

无论如何，每张图片都包含不同的版本：1 代表默认外观，1 代表鼠标悬停，另一个代表 onclick/active。我目前使用的 html 和 CSS 如下所示：

HTML

<li>
    <a id="About" class="button" href="About Us.cshtml">About Us</a>
</li>
<li style="margin-left: 30px;">
    <a id="Services" class="button" href="Services.cshtml">Services</a>
</li>
<li style="margin-left: 30px;">
    <a id="Contact" class="button" href="Contact Us.cshtml">Contact Us</a>
</li>

CSS

#About background: url(../Buttons/About.png) no-repeat 0 0; width: 87px;
#Services background: url(../Buttons/Services.png) no-repeat 0 0; width: 112px;
#Contact background: url(../Buttons/Contact.png) no-repeat 0 0; width: 117px;
a.button height: 20px; display: inline-block;
a.button:hover background-position: 0 -20px;
a.button:active background-position: 0 -40px;

出于某种原因，“悬停”和“活动”状态无效。我注意到，如果我为每个按钮而不是 id 定义类，它可以正常工作 - 但这对我来说毫无意义。每个按钮都有自己的图像和宽度，因此是独一无二的（这就是为什么我给他们 id 而不是类）。

谁能解释我哪里出错了？我对这一切都是新手，所以任何解释都需要外行。

【问题讨论】：

请尝试在 jsfiddle 中复制问题。您将获得更快更好的答案。

欢迎来到 CSS 特性的美妙世界！阅读：coding.smashingmagazine.com/2007/07/27/…

@Gurpreet Singh - 谢谢，我没有考虑过。

@Scott Brown - 非常感谢您提供的链接。我会读一读。

【参考方案1】：

问题在于您的 ID 选择器比您的类 + 伪选择器组合更具体。但如果你不在 ID 选择器中指定位置，你会没事的。例如：

#About background-image: url(../Buttons/About.png); width: 87px;
#Services background-image: url(../Buttons/Services.png); width: 112px;
#Contact background-image: url(../Buttons/Contact.png); width: 117px;
a.button height: 20px; display: inline-block; background-repeat: no-repeat
a.button:hover background-position: 0 -20px;
a.button:active background-position: 0 -40px;

【讨论】：

啊啊啊，好的。我正在使用'background：url ...'，这覆盖了类选择器中的'background-position'属性 - 所以现在我已经将它更改为'background-image：url ...'，不再有冲突。我猜想在 id 选择器中有“不重复”会增加问题。正确的？谢谢你的帮助。我想我现在理解得更好了。

完全正确。学习 CSS 确实很痛苦，但听起来你很快就会掌握它的窍门 :)

【参考方案2】：

它不适用于 ids 但适用于类的原因是 ids 将被覆盖，因为它们更“特定”。

当遇到冲突时，CSS 优先顺序包括样式与元素匹配的具体程度，并且 id 是您可以获得的最具体的。

您是否有不想只使用类的原因？在语义网络中，类通常会被视为处理这种情况的方式。

【讨论】：

我怀疑这可能与特异性有关。我试图避免使用类的唯一真正原因是每个按钮都有一个类。据我了解，应该使用 id 定义唯一项目。我想我错过了一些东西。不管怎样，我都会接受你的建议。谢谢你的帮助！莱昂

如果您要使用 javascript 与元素交互，那么使用 id 可以提高性能，但对于 CSS 样式，类定义就可以了。

有趣的是你应该提到它——我的下一个问题是：如何让按钮在被点击后保持活动状态？我想它可能需要一些javascript。我最好在单独的线程上问这个问题吗？