Example code for changing the style of other tags by hovering the mouse using CSS
|
Preface: As far as I know, currently CSS can only control the style of the sibling tags and sub-tags under the tag when hovering. If anyone has a good method, please advise!
1. Control sub-tags (use space between .div1:hover and .div2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1,.div2 {
width: 200px;
height: 100px;
background-color: pink;
}
.div2 {
background-color: aqua;
display: none;
}
.div1:hover .div2 {
display: block;
}
</style>
</head>
<body>
<div class="div1">div1
<div class="div3">div3</div>
<div class="div2">div2</div>
</div>
</body>
</html>As long as the controlled tag is a child tag of the controlling tag, other tags (such as .div3) will not affect the effect! 2. Control sibling tags (use + between .div1:hover and .div2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1,.div2 {
width: 200px;
height: 100px;
background-color: pink;
}
.div2 {
background-color: aqua;
display: none;
}
.div1:hover+.div2 {
display: block;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<!-- <div class="div3">div3</div> -->
<div class="div2">div2</div>
</body>
</html>When using “+”, .div2 must be placed closely behind .div to be effective, otherwise it will be ineffective! ! ! For example: after uncommenting .div3, .div1 will not be able to control the style of .div2! ! ! If there is content between the controlling tag and the controlled tag, it needs to be written in the third way! 3. Control sibling tags (with content in the middle) (~ is used between .div1:hover and .div2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1,.div2 {
width: 200px;
height: 100px;
background-color: pink;
}
.div2 {
background-color: aqua;
display: none;
}
.div1:hover~.div2 {
display: block;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div3">div3</div>
<div class="div2">div2</div>
</body>
</html>The requirement for using this method is that the controlled tag must be below the controlling tag, and there can be any content in between. Summarize:
This concludes this article on how to use CSS to change the styles of other tags when the mouse is hovering. For more information on how to change the styles of other tags when the mouse is hovering, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. We hope that you will support 123WORDPRESS.COM in the future! |
<<: Div css naming standards css class naming rules (in line with SEO standards)
>>: How to hide the text in the a tag and display the image? Compatible with 360 mode rendering
Recommend
Personal opinion: Talk about design
<br />Choose the most practical one to talk ...
A brief introduction to web2.0 products and functions
<br />What is web2.0? Web2.0 includes those ...
CSS3 category menu effect
The CSS3 category menu effects are as follows: HT...
How to use JavaScript strategy pattern to validate forms
Table of contents Overview Form validation withou...
SQL injection vulnerability process example and solution
Code example: public class JDBCDemo3 { public sta...
SQL left join and right join principle and example analysis
There are two tables, and the records in table A ...
HTML text escape tips
Today I saw a little trick for HTML text escaping ...
Basic use of javascript array includes and reduce
Table of contents Preface Array.prototype.include...
Simple implementation method of two-way data binding in js project
Table of contents Preface Publish-Subscriber Patt...
Several mistakes that JavaScript beginners often make
Table of contents Preface Confusing undefined and...
The latest Linux installation process of tomcat8
Download https://tomcat.apache.org/download-80.cg...
MySQL 8.0 download and installation configuration graphic tutorial under Windows 10
This article shares the download and installation...
Some notes on modifying the innodb_data_file_path parameter of MySQL
Preface innodb_data_file_path is used to specify ...
How to quickly delete all tables in MySQL without deleting the database
This article uses an example to describe how to q...
Shell script to monitor MySQL master-slave status
Share a Shell script under Linux to monitor the m...