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

This article mainly explains "how to achieve the effect of mouse deployment by html". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "html how to achieve the mouse over the deployment effect" bar!

Analysis.

We observe that when the mouse hovers over an item in the navigation bar, the background effect expands from the middle to the left and right; when moved away, it shrinks from the left and right to the middle. The following analysis can be made:

The text itself does not expand and contract, indicating that the text and the background are not the same element.

The text is shown above the background, and there is a relationship between the text element and the background element, that is, there is a location.

Background expansion and contraction have obvious transition effect.

Realize

According to the above three points, we make breakthroughs one by one.

1. Text element and background element

Text element

First, the text is implemented using span tags. Add simple styles such as width, height and center.

HTML

Project

CSS

Span {

Display: inline-block

Width: 100px

Height: 30px

Line-height: 30px

Text-align: center

}

Background element

The background itself has no specific meaning, it's just for embellishment, and we can use the span pseudo element: the after implementation (which reduces a tag that specifically represents the background).

CSS

Span:after {

Content: ""

Background-color: # f00

}

Now you can only see the text, but not the background color, because the background element has no content and no width and height. The effect is as shown in the figure:

You can only see the text, and the background color is not stretched.

two。 Display background elements below text elements

The element cascading effect is generally implemented by the parent relative child absolute.

Text element

Span {

Display: inline-block

Width: 100px

Height: 30px

Line-height: 30px

Text-align: center

Position: relative

}

Background element

Span:after {

Content: ""

Background-color: # f00

Position: absolute

Top: 0

Bottom: 0

Right: 0

Left: 0

Z-index:-1

}

Note: top: 0 position bottom: 0 position right: 0 left: 0; the function is to tile the entire text element in the background.

3. Mouse over background element expansion

The background element starts in the middle of the horizontal position, which means that the distance is about half the length of the text element. When the mouse hovers over the text element, the background expands.

Initial state of background element

Span:after {

Content: ""

Background-color: # f00

Position: absolute

Top: 0

Bottom: 0

Right: 50%

Left: 50%

Z-index:-1

}

Mouse over background element expansion

Span:hover:after {

Right: 0

Left: 0

}

Mouse hover immediately display the background color, the effect is the same as span:hover directly change the color. We also need to add a transition to the background element.

Span:after {

Content: ""

Background-color: # f00

Position: absolute

Top: 0

Bottom: 0

Right: 50%

Left: 50%

Z-index:-1

Transition: 0.3s

}

The great task has been completed.

Complete code

Project

Span {

Display: inline-block

Width: 100px

Height: 30px

Line-height: 30px

Text-align: center

Position: relative

}

Span:after {

Content: ""

Background-color: # f00

Position: absolute

Top: 0

Bottom: 0

Right: 50%

Left: 50%

Z-index:-1

Transition: 0.3s

}

Span:hover:after {

Right: 0

Left: 0

}

At this point, I believe that everyone on the "html how to achieve the mouse after the deployment effect" 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!

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.