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

This article mainly explains "how to use the pseudo-class selector hover in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use the pseudo-class selector hover in CSS".

The pseudo-class selector hover can set some special styles when you mouse over the link, such as font size, background color, show hidden, and so on.

Note: the pseudo-class selector hover can work on all elements, not just links.

A selector similar to hover is link,visited,active. The link selector can set the unaccessed link style, the visited selector can set the accessed link style, and the active selector can set the active link style. Students who are not clear can refer to the CSS video tutorial.

Usage 1: change the style of the mouse itself as it passes over the link (hover is directly followed by the style)

Description: when the mouse passes over, the font color of the a tag changes to red and the font becomes larger, the code is as follows:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

.aa {text-decoration: none;color: # 0000000;}

.aa: hover {color: red;font-size: 20px;}

Welcome to PHP Chinese website to learn and communicate.

The first picture is the original effect, and the second picture is the effect achieved after the mouse is over.

Usage 2: use the pseudo-class selector hover to control the style of its child elements (hover followed by a space and then to change the style of the element)

Description: when the mouse passes over div, the color of its child elements changes to purple, the font becomes larger, and a red border appears. The code is as follows:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

.aa {text-decoration: none;color: # 0000000;}

.box: hover .aa {color: purple;font-size: 30px; border: 1px solid red;}

Hope for the success of your son and hope for your daughter to become a Phoenix

The effect is shown in the following figure:

Usage 3: control the style of its sibling element when the mouse passes over (hover followed by "+" and then to change the style of the element)

Description: when the mouse passes over, the background color of its brother element changes to yellow, and the font becomes larger, the code is as follows:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

.aa {text-decoration: none;color: # 0000000;}

.box1: hover + .box2 {font-size: 30px; background: yellow;}

There is a bright moonlight in front of the bed

Can it be hoar-frost on the ground

Effect picture:

Thank you for reading, the above is the content of "how to use the pseudo-class selector hover in CSS". After the study of this article, I believe you have a deeper understanding of how to use the pseudo-class selector hover in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.