Home > Article > Web Front-end > Example demonstrating the use of pseudo-class selector hover in CSS

Example demonstrating the use of pseudo-class selector hover in CSS

yuliaOriginal: 2018-10-23 15:47:215058browse

In page layout, the hover selector in CSS is often used. It can set a special style when the mouse passes. As a front-end developer, you know How to use the CSS pseudo-class selector hover? This article will tell you how to use hover in CSS and demonstrate it with examples. It has certain reference value and interested friends can take a look. The pseudo-class selector hover can set some special styles when the mouse moves over the link, such as font size, background color, display and hiding, etc.

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

Selectors similar to hover include link, visited, and active. The link selector can set the link style that has not been visited, the visited selector can set the link style that has been visited, and the active selector can set the activated link style. Students who are unclear can refer to

CSS video tutorial

Usage 1:

Change its own style when the mouse passes over the link (directly connected to the style after hover) Description: When the mouse passes over the link, the a tag The font color changes to red and the font becomes larger. The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.aa:hover{color: red;font-size: 20px ;}
</style>
</head>
<body>
<a href="#" class="aa">欢迎大家来PHP中文网学习交流</a>
</body>
</html>

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

Example demonstrating the use of pseudo-class selector hover in CSS

Usage 2:

Use the pseudo-class selector hover to control the style of its child elements (add a space after hover Then change the style of the element) Description: When the mouse passes over the div, the color of its sub-elements changes to purple, the font becomes larger, and a red border appears. The code is as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.aa{text-decoration: none;color: #000000;}
			.box:hover .aa{color: purple;font-size: 30px ;border: 1px solid red;}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="#" class="aa">望子成龙，望女成凤</a>
		</div>
	</body>
</html>

The effect is as shown below:

Example demonstrating the use of pseudo-class selector hover in CSS

Usage 3:

Control the style of its sibling elements when the mouse passes over (add " " after hover and then To change the style of the element) Description: When the mouse passes over, the background color of its sibling elements changes to yellow and the font becomes larger. The code is as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.aa{text-decoration: none;color: #000000;}
			.box1:hover + .box2{font-size: 30px ;background: yellow;}
		</style>
	</head>
	<body>
		<div class="box1">床前明月光</div>
		<div class="box2">疑是地上霜</div>
	</body>
</html>

Rendering:

Example demonstrating the use of pseudo-class selector hover in CSS The above introduces how to use the pseudo-class selector hover in CSS. Beginners can try it by themselves to see if your code can achieve the effect. I hope this article It helps!

The above is the detailed content of Example demonstrating the use of pseudo-class selector hover in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the box-ordinal-group attribute of the box's layout positionNext article：Detailed explanation of the box-ordinal-group attribute of the box's layout position

See more

Example demonstrating the use of pseudo-class selector hover in CSS

Related articles