Question

我正在使用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>

并应用以下样式，将底部边框显示为带有Lime颜色的脊，其余部分将以虚线模式显示。

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

非常感谢任何帮助。

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>

Answer 2

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

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

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

悬停时的HTML按钮标记样式

2 个答案: