为什么悬停选择器不适用于小节？

Question

I have set the styles for links (active, link, etc), but then I want to do a button with totally different styles so I tried something like this:

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

But then I realized that :hover doesn't work with clases. Why is that? What others chances do I have to do the same?

Answer 1

You will need to either REMOVE !important from your color in .r-button or add it to .r-button:hover 's color

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

Answer 2

It does, your color: black !important; is overriding the hover and that selector isn't a valid cursor. Try pointer on hover.

.r-button:hover { cursor: pointer; }

Answer 3

Your :hover pseudo element was being overwritten with !important . Avoid using !important rules within your default class.

Bonus tip! Remove cursor: pointer for anchor tags, and simply have an empty href="#" attribute for better accessibility.

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

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