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

This article mainly introduces how to achieve the mouse hover effect in the html5 page, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

This effect is very useful in actual development. We can add this effect to our links to better reflect the affinity and ease of use of the web page. We can also provide such tip prompts under the download link. Let's see how such a mouse-over TIP effect is achieved. Look at the following XHTML code:

Example Source Code []

Div CSS tutorial

Div CSS tutorial

In the link A tag, the span and p tags are nested, which is the basic element of our tip. Let's see how CSS controls how it is displayed. The CSS code is as follows:

Example Source Code []

* {

Font-size:12px

}

. Tip {

Position:relative

Color:#00c

Text-decoration:none

}

. Tip:hover {

Background:none

Color:#000

}

. Tip span {

Display:none

}

. Tip:hover span {

Display:block

Position:absolute;top:26px;left:10px

Border-bottom:2px solid # eee

Border-right:2px solid # eee

}

. Tip:hover span p {

Color:#f60

Text-align:left

Padding:5px

Border:1px solid # ccc

Background:#fff

}

Overall layout declaration, text size is 12px. The text of the link and the text of the prompt tip are 12px.

Define the class tip as relative positioning and the text color as # 00c. The prompt for the link is underlined as none.

Tip:hover-like effect, no background color, text color of # 000.

By default, the span under the class tip is not displayed, that is, display:none.

Span settings in tip:hover-like state:

Defined as a block element, absolutely positioned at the distance from the upper 26px to the left is 10px.

The bottom border and the right border are solid lines of 2px and the color is # eee.

Here is the outermost border of the tip prompt, and this setting locates its position and creates a simple shadow effect.

The setting of p in span in tip:hover-like state:

Define the text color as # f60, aligned to the left.

Fill it with 5px so that the text is at a distance from the border.

The border is the solid line of 1px and the color is # ccc. The background color is white # fff.

The display of tip text is defined here, which forms a performance border on all sides of the tip.

Coupled with the definition of the lower border and the right border in the previous span, the container effect of the tip prompt is outlined.

Thank you for reading this article carefully. I hope the article "how to achieve the effect of hovering over the mouse in the html5 page" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.