CSS how to control the mouse across the change picture?

When we use the mouse to swipe through the web, will always be a sudden change of the image to attract attention, which greatly improve the user experience, resulting in higher efficiency. Then this article is mainly introduced with CSS how to control the mouse across the changes in the picture, there is a need for friends to refer to.

CSS controls the specific code example that transforms a picture when the mouse is over:

<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> 

 
Note:
 
The Css:hover selector is used to select the element on which the mouse pointer floats and is available for all elements, not just links.