html - 使用外部 CSS 工作表时，如何在按钮元素上获得悬停功能？

Question

我正在使用外部 CSS 工作表并希望在我的按钮上具有悬停效果，我在搜索 Internet 时找到的所有示例均指内联 CSS 如何在使用外部 CSS 工作表时获得效果，在下面的示例中 #按钮工作但 #button:hover 不工作

#button {
    margin: auto;
    font-size:24px;
    border-radius:8px;
    padding: 10px;
}

#button:hover{
    color:black;
}

按钮的 HTML 代码是：

   <div id="nav">
        <button id="button">Clothing </button>
        <button id="button">Accessories</button>
        <button id="button">About</button>
        <button id="button">Contact</button>
        <button id="button">News</button>
    </div>

Answer 1

试试这样写。所以，而不是使用“颜色”属性

#button:hover {background-color:black;} 

Answer 2

颜色只改变文本的颜色。而是使用背景

这是我创建的一个代码笔，可能会对您有所帮助