HTML按钮标签鼠标悬停样式

Question

我正在使用HTML的button标签，但是下面提到的样式应该只适用于顶部菜单，而不适用于站点中的其他按钮标签。我尝试了使用代码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;
}

- Yashman Gupta

---

将 button:hover 更改为 button#menuButton:hover，它将正常工作。 - gout

更好的做法是只用 #menuButton:hover ——因为您已经有了一个ID，所以没有必要给出标签名称。 - Marnen Laibow-Koser

Answer 1

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

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

- Ashwin

---

老板，为什么要用id和class两个选择器？其中一个就足够了吧。 - gout

@gout：因为提问者在问题中使用了“id”，所以我就让它保留在那里了。 - Ashwin

@suraj：注意了，这是最后警告。 - Ashwin

老板：我承认问题的格式真的很糟糕。非常差劲的标准，这段代码在不支持Webkit的浏览器中无法运行。 - gout

Answer 2

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

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

在CSS中，点（.）表示你正在引用元素上的类名。

- Jamie Dixon

---

@Yashman Gupta：如果您想将样式应用于特定的按钮，您应该仅在这些按钮标签中指定一个类。例如： - Ashwin