HTML CSS 按钮悬停不能通过类工作答案

【问题标题】：HTML CSS Buttons Hover Wont Work Through ClassHTML CSS 按钮悬停不能通过类工作
【发布时间】：2023-04-11 03:33:01
【问题描述】：

我不明白为什么会这样：

.button:active {
    position:relative;
    top: 2px;
    left:2px;
}

但这行不通：

.button:hover { 
    font-size:17px;
}

当我使用 id 时它可以工作，但我希望它为所有按钮激活：

#btnhome:hover{
    font-size:17px;
}

这很好用，但在课堂上就不行了？我做错了什么？

【问题讨论】：

对我来说很好。请在jsfiddle.net 上包含一个完整的测试用例，显示什么不适合你。
也许你的 CSS 规则稍后会重写？给你看 CSS。
@Belyash 我不明白，因为这是我在整个 CSS 中使用的唯一 :hover 样式。没有什么可以压倒它。 “css 规则稍后重写”是什么意思？
你用的是什么浏览器？我在 Chrome 中，这似乎工作正常。
@jkinz 我认为我的 CSS 中的某些东西覆盖了它..虽然不知道是什么...

标签： html css class button hover

【解决方案1】：

使用id，它的工作原理肯定与特殊性有关，骑车，试试这个

Demo

Demo + !important

.button:hover { 
    font-size:17px !important; /* Actually you don't even need !important */
}

【讨论】：

是的，它现在可以工作（仅适用于 !important）。我不明白骑它有什么意义？你能解释一下吗？我在哪里可以找到超车？ :)
@user1880779 我不能，除非我看到你的 CSS，把它粘贴到小提琴中并分享一个链接 :)
盲拍大声笑不......但我能告诉你像div.container ul li input[type=button].button:hover这样的东西比.button:hover更具体
最后的想法：如果您发现自己多次使用!important，这表明您的 CSS 选择器总体上有点过于具体。可能是时候退后一步重新考虑一些事情了
@user1880779 只是特异性问题，请参阅此演示 jsfiddle.net/mMF5r/16 #btnhome:hover, #btnabout:hover, #btncontact:hover { font-size:17px; }

【解决方案2】：

试试：
.button *:hover { font-size:17px; }

【讨论】：

【解决方案3】：

肯定有一个外部 .css 文件由您通过使用 link 标签包含，其中定义了.button:hover {font-size:somethingelse !important;}。这就是为什么除非再次使用 !important 才能更改它。

【讨论】：

是的，只包含一个 .css 文件 '' 但这是我定义它的文件，但它没有没有您发布的那条线...？唯一的 !important 标签是我刚刚添加的标签，所以它可以工作。
那么有没有像 button:hover{font-size:somethingelse;} 这样的代码定义在你的新 css 代码之后，因为你的新 css 选择器之前的所有 css 选择器都将被新的选择器覆盖。
我不明白，因为这是我在整个 CSS 中使用的唯一 :hover 样式。没有什么可以压倒它。
或者是否定义了任何内部样式表？如果是，请检查，因为 :hover 不能通过使用内联样式来定义。
不，我没有定义任何内部样式表。这是我拥有的唯一样式表，也是我唯一正在使用/定义的样式表。不知道怎么回事。

【解决方案4】：

这是特异性。 ID 优先于伪样式。您需要重写 CSS 以使其更通用，并且只将唯一值放在 ID 上或使用 ID 加上伪选择器。

我从 ID 中取出常用的东西并将它们移动到一个基本的 .button 类：

.button{
    width: 84px;
    height: 46px;
    background-color:#000;
    border: none;
    color: white;    
    font-size:14px;
    font-weight:700;
}
.button:hover { 
     font-size:17px;
}

查看这个小提琴以查看它的实际效果：http://jsfiddle.net/kJfmR/

【讨论】：