javascript - 为什么悬停选择器不适用于类？

Question

我已经设置了链接的样式(事件、链接等)，但是我想做一个具有完全不同样式的按钮，所以我尝试了这样的事情:

.r-button { padding: 4px 52px; display: inline-block; text-align: center; font-size: 16px; text-decoration: none !important; color: black !important; border-radius: 12px; border:1px inset #282c37;}

.r-button:hover { cursor: selector; color:ivory;}

<a class="r-button" onclick="document.getElementById('menu').style.display='block'">  Click button </a>

但后来我意识到 :hover 不适用于类。这是为什么？我还有哪些机会做同样的事情？

Answer 1

您需要从 .r-button 的颜色中删除 !important 或将其添加到 .r-button:hover 的颜色

.r-button { padding: 4px 52px; display: inline-block; text-align: center; font-size: 16px; text-decoration: none !important; color: black !important; border-radius: 12px; border:1px inset #282c37;}

.r-button:hover { cursor: selector; color:ivory !important;}

<a class="r-button" onclick="document.getElementById('menu').style.display='block'">  Click button </a>