I am trying to make the text in a button change color when I hover over in with the mouse using CSS

Question

I have a wordpress website and I have a button in the header menu which is called 'Join as a tradesperson'.

http://prntscr.com/px7mdt

It has a green border and white background and the text is black.

I wanted the background of the button to change to green (color: #25ad00) and the text to change to white (color: #fff) when I hover over it.

I have added the following code to custom css is the dashboard:

body #menu-item-1847 a{
    color:#000;
}
#menu-item-1847 a{
    font-weight: 700;
    border: 2px solid #25ad00;
        border-radius: 5px;
    padding: 2px 20px
    }
#menu-item-1847 a:hover {
    color: #fff;
    background-color: #25ad00;
}

...but now when I hover over the button the background turns green but the text remains black:

http://prntscr.com/px7o9u

I was jut wandering what is wrong with the code as I thought the

#menu-item-1847 a:hover {
    color: #fff;

...would change the color of the text to white when I hover over it?

Thank you

Answer 1

To overwrite existing CSS, add !important like this:

#menu-item-1847 a:hover {
color: #fff!important;
background-color: #25ad00!important;
}

Answer 2

You can using !important statement like this. (If you specified the selector correctly, if not, double check the selector #menu-item-1847)

#menu-item-1847 a:hover {
    color: #fff!important;
}

It means, something like:

Use me, if there is nothing important else around!

Answer 3

It's all about your DOM's CSS specificity you can make your code working without adding.important.

Just increase the CSS specificity. (share your HTML I will explain you this with CSS specificity)

Please read about CSS specificity. Using.important is not good practice. It is not clean code. Go through these articles.

Don't use !important instead increase CSS specificity Is Using?important is a right choice?