悬停时的 HTML 按钮标记样式答案

【问题标题】：HTML Button Tag Style On Hover悬停时的 HTML 按钮标记样式
【发布时间】：2012-04-21 16:09:35
【问题描述】：

我使用的是 HTML 按钮标签，但下面提到的样式应该只适用于顶部菜单，而不是网站中的其他按钮标签。我尝试使用代码button.menuButton:hover，但它不起作用

<button id="menuButton" type="button" name="menuButton" title="Logout">
<img src="images/commonicons/logout.png" alt="Logout" id="imgLogout" /><br /><b>Logout</b>
</button>

并应用以下样式，将底部边框显示为带有石灰色的山脊，其余边将处于虚线模式。

button:hover
{
    border: 1px dashed #CCCCCC;
    border-bottom: 2px ridge Lime;
}

非常感谢任何帮助。

【问题讨论】：

更改按钮：悬停到按钮#menuButton:hover，它会正常工作
@gout 更好的是，只需#menuButton:hover——因为你有一个 ID，所以不需要提供标签名称。

标签： css htmlbutton

【解决方案1】：

如果您想使用button.menuButton:hover，那么您的按钮将需要 .menuButton 类。

<button [...] class="menuButton">

在 CSS 中，点 (.) 表示您指的是元素上的类名。

【讨论】：

@Yashman Gupta ：如果您希望样式仅应用于特定按钮，则应仅在这些按钮标签中指定一个类。例如：

【解决方案2】：

如果您希望样式仅应用于特定按钮，则应仅在这些按钮标签中指定一个类。例如：
这是按钮类：

.mybutton
{
    border: 1px dashed #CCCCCC;
    border-bottom: 2px ridge Lime;
}

在声明按钮时：

此按钮将具有以下样式：

 <button id="menuButton" type="button" name="menuButton" class="mybutton" title="Logout">
  <img src="images/commonicons/logout.png" alt="Logout" id="imgLogout" /><br       /><b>Logout</b>
</button>

此按钮将没有样式：

<button id="menuButton" type="button" name="menuButton"title="Logout">
      <img src="images/commonicons/logout.png" alt="Logout" id="imgLogout" /><br       /><b>Logout</b>
    </button>

【讨论】：

老板为什么要同时使用 id 和 class ？任何一个都足够了。
@gout ：因为提问者在他的问题中使用了 id，所以我就让它在那里。
@suraj : vidu vidu .. 最后警告。
老板：我接受的问题是格式真的很糟糕。非常差的标准，此代码将无法在不支持 webkit 的浏览器中运行。