How to change the picture effect by mouse skimming in css

This article mainly introduces "css how to achieve mouse over to change the picture effect", in the daily operation, I believe that many people in css how to achieve mouse over to change the picture effect problems have doubts, the editor consulted all kinds of data, sorted out a simple and useful method of operation, hope to answer the "css how to achieve mouse over to change the picture effect" doubt! Next, please follow the editor to study!

In css, you can use the ": hover" selector and the "background-image" attribute to change the picture effect by adding "picture element: hover {background-image:url (new picture path);" style to the picture element.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to change the picture effect by mouse skimming in css

In css, you still need to use the hover selector and the background-image property if you want to change the image with the mouse.

The hover selector is used to select the out-of-date state of the mouse and set the style, and the background-image property is used to set the background image of the element.

Examples are as follows:

Div {width: 380px; height: 250px; background-image: url (1118.02.png);} div:hover {width: 380px; height: 250px; background-image: url (1118.01.png) } move the mouse over the picture

Output result:

At this point, on the "css how to achieve mouse over to change the picture effect" on the end of the study, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!