Making a div into a button that changes color when I press it
I would like to make a div into a button with a background that changes color when I mouse over and another color when I press it. What I want to do is have the button behave like a link that takes me to another page when I press it.
Can you tell me if this is simple to do. How do I make the colors cha开发者_如何学Cnge? If you have any example I would really be thankful for your help.
As long as the <div>
doesn't contain any interactive content (for example, a link or a <button>
element), you can do something like this:
<a href="http://example.com">
<div id="awesomediv">Foo</div>
</a>
Then use the CSS pseudo-classes :hover
and :active
to style the <div>
element:
a:hover #awesomediv {
background-color: green;
}
a:active #awesomediv {
background-color: blue;
}
Which would make the <div>
element turn green when you hover over it and turn blue when clicked.
精彩评论