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="//m.sbmmt.com" 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!
Solution to Win7 folder properties not sharing tab page
what is vuex
How to clean the computer's C drive that is too full
Mathematical modeling software
The difference between vscode and vs
How to type the inscription on the coin circle?
How to decrypt bitlocker encryption
How to solve the slow download problem of Baidu Netdisk
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
