EN
CSS - change color on hover
0 points
In this article, we would like to show you how to change the color of an element on hover event using CSS.
Quick solution:
xxxxxxxxxx1
div:hover {2
background: red;3
}The :hover CSS pseudo-class is triggered when the user hovers over an element with the cursor, changing the element style to the one specified within curly brackets.
In this example, we change color of the div element with the following steps:
- in
divstyle, we specify the div style at the beginning and use thetransitionproperty to smoothly change the color of thedivover1second, - we use
div:hoverpseudo-class withbackgroundproperty inside that actually changes the color of thedivelement on the hover event.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
width: 100px;8
height: 100px;9
border-radius: 10px;10
background: deepskyblue;11
transition: 1s;12
}13
14
/* required */15
div:hover {16
background: green;17
}18
19
</style>20
</head>21
<body>22
<div></div>23
</body>24
</html>