How do I use CSS to override another picture when I move the mouse over? Example

When we are in the design of the site, if we encounter a request when the mouse moves out of a picture, to automatically overwrite another picture, how to do it? In fact, a little bit of knowledge of some CSS code friends know that this is a very simple operation. Even the novice small white, as long as through this article introduction, can easily understand the knowledge points. So today I give you a detailed introduction of CSS mouse through the style of covering a picture of the effect function.

CSS mouse move in to move out a specific code example that overrides another picture:

<! DOCTYPE html>
The above effects are as follows:

1, just opened the page is displayed:


2, the CSS mouse move in the display is covered with another one:


In fact, the key to this article is to use hover pseudo-class. Here also give you a brief introduction of the definition and usage of css:hover.

: The hover pseudo-class adds a special style to this element when the mouse is moved over the element. This pseudo-class application is in the "hover state" element. Hover is defined as the user indicates an element but does not activate it. The most common example of this is moving the mouse pointer within the bounds of a hyperlink in an HTML document. In theory, other elements can also be in hover state, but CSS does not define exactly which elements.

Note: All major browsers support: hover pseudo-class.

I hope this article is helpful to the needy friends!