Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to achieve css mouse suspension change pictures, Xiaobian feel quite practical, so share to everyone as a reference, I hope you can gain something after reading this article.

In CSS, you can use the ":hover" pseudo-class selector and background attribute to achieve the effect of hovering the mouse to change the picture, the syntax is "picture element:hover{background:url(the path to display the picture after hovering the mouse);}".

Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.

Css mouse hover change picture

This can be achieved in CSS by using the:hover pseudo-class, where the:hover selector is used to select elements over which the mouse pointer floats.

Tip: The hover selector can be used with all elements, not just links.

Tip: The:link selector styles links to pages that have not been visited, the:visited selector styles links to pages that have been visited, and the:active selector styles links to active pages.

Note: In CSS definitions,:hover must follow:link and:visited (if present) for the style to take effect.

Let's take a look at the following examples:

Document div{ width:350px; height:250px; background:url(1118.01.png); }div:hover{ background:url(1118.02.png); }/* mouse over */

When the mouse is not placed on the picture, the output is as follows:

When the mouse is placed over the picture, the output is as follows:

This completes the mouse hover to change the picture.

About "css how to achieve mouse suspension change pictures" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.