So, it's pretty easy to set a hover over effect for an element. But what I want is when the user hovers over a button that has text in it, to make the button turn from black to white and the text from white black at the same time. Instead of two separate elements. How should I do this?
Thanks!
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
}
#signUpBox:hover {
background-color: #ffffff;
}
h3 {
text-align: center;
margin-top: -35px;
letter-spacing: 1px;
font-size: 17px;
}
I'm not sure how you have the code set up but this would work on a div with an onclick
function attached as a button:
#signUpBox {
width: 150px;
height: 47px;
border: solid 1px #000;
margin: auto;
margin-top: 25px;
border-radius: 2px;
color:#000;
background:#fff;
}
#signUpBox:hover {
background: #000;
color:#fff;
}
HTML:
<div id="signUpBox">This is a test</div>
#signUpBox:hover {
background-color: #ffffff;
color:#000000;
}
change text color using color
property on hover.
#signUpBox:hover {
background-color: black;
color: white;
}
Here is a demo.
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
background: #000000;
color: #FFFFFF;
}
#signUpBox:hover {
background: #ffffff;
color: #000000;
cursor: pointer;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.