search

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:152340browse

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>

How does CSS control the image to change when the mouse moves over it?

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!

css css3 指针 JS 选择器
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to achieve the effect of scrolling up a single line of text (code attached)Next article：How to achieve the effect of scrolling up a single line of text (code attached)

Related articles

See more