How to set the mouse to put the picture and the text appears in css

The main content of this article is to explain "how to set the mouse to put the picture on the text", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "css how to set the mouse on the picture appears text" bar!

Css sets the mouse to put on the picture to appear text: 1, add the "display:none;" style to the text element to make it hidden; 2, use the "parent element: hover text element {display:block;}" statement to achieve the effect of displaying text on the picture with the mouse.

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

The method of setting the mouse to put the picture and appear the text in css

1. Use and define the text that will appear on the picture. You can combine HTML elements with.

The code is as follows:

This is the text to appear on the picture.

2. Add a background image to the div element and set the size; add a "display:none;" style to the text element span so that it is not displayed, as follows:

Background-image:url (picture name); width:250px;height:100px;background-position:center;display:none;text-decoration:none

3. When you use the hover selector to hold the mouse over the picture, the text appears as follows

Document .a {background-image:url (1115.08.png); width:250px;height:100px;background-position:center;} .a span {display:none;text-decoration:none;}. A:hover span {display:block;position:absolute;top:0;left:0;color:blue;} this is a landscape painting

Output the result, when the mouse is not over the picture:

When the mouse is over the picture:

At this point, I believe that everyone on the "css how to set the mouse on the picture appears text" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!