Home > Article > Web Front-end > How does CSS control the image to change when the mouse moves over it?
How does CSS control the image to change when the mouse moves over it?
- 藏色散人Original
- 2018-08-06 16:42:152350browse
When we use the mouse to browse the web, we are always attracted by the sudden changes in pictures, which greatly improves the user experience and brings higher efficiency. So this article mainly introduces how to use CSS to control the image change when the mouse is passed over. Friends in need can refer to it.
The specific code example for CSS to control the image transformation when the mouse moves over is as follows:
<style type="text/css">
.demo {
width:500px;
height:400px;
text-decoration:none;
display:block;
background-image:url(1.png);
background-position:0px 0;
background-repeat: no-repeat;
}
.demo:hover,.demo:active {
background-position:0 0;
background-image: url(2.png);
}</style>
</head>
<body>
<a href="http://www.php.cn" class="demo"> </a>
</body>
Note:
CSS :hover selector is used to select the element the mouse pointer is hovering over and can be used for all elements, not just links.
[Recommended related articles]
CSS3 dynamic prompt effect when the mouse moves into the image
Detailed explanation of CSS to achieve the icon rotation effect when the mouse moves up Method
JS and CSS3 to achieve image responsive mouse movement magnification effect example
##
The above is the detailed content of How does CSS control the image to change when the mouse moves over it?. For more information, please follow other related articles on the PHP Chinese website!