I am trying to create a button with text inside. I want it so that when you hover over the box, the color of the box changes to white, and the colour of the text changes to blue.

How can I add css to make my text and box change colors on hover?

Edited: I got the html snippet for that from another part of the website template I am editing. It is basically a box that does exactly what I have outline above. I then placed it inside the list tag of the menu html, hoping that it will just transfer the functionality but it didn't work. So I tried to add the [hover:] but it still isn't working.

I know I am doing something wrong but I don't know enough to know what it is.

Code snippet is for html:

Upload resources

CodePudding user response：

Use the :hover pseudo selector

e.g.

button {
    color: white;
    background: blue;
}

button:hover {
    color: blue;
    background: white;
}

Of course, replace with the actual hex codes you need rather than the colour names above, and any valid property can be used, e.g. border, text-decoration etc.

CodePudding user response：

Use :hover pseudo selector

element{
    color: white;
    background: blue;
}

element:hover{
    color: blue;
    background: white;
}

You can check these at Click Here