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
How to use vs2019 for Linux remote development
Usually, there are two options when we develop Li...
MySQL InnoDB row_id boundary overflow verification method steps
background I talked to my classmates about a boun...
18 sets of exquisite Apple-style free icon materials to share
Apple Mug Icons and Extras HD StorageBox – add on...
Get the calculated style in the CSS element (after cascading/final style)
To obtain the calculated style in a CSS element (t...
How to remount the data disk after initializing the system disk in Linux
Remount the data disk after initializing the syst...
JavaScript canvas to load pictures
This article shares the specific code of JavaScri...
mysql wildcard (sql advanced filtering)
Table of contents First, let's briefly introd...
Comprehensive inventory of important log files in MySQL
Table of contents Introduction Log classification...
How to deploy the crownblog project to Alibaba Cloud using docker
Front-end project packaging Find .env.production ...
Detailed explanation of this pointing in JS arrow function
Arrow function is a new feature in ES6. It does n...
A brief discussion on how to solve the depends_on order problem in Docker-compose
Using depends_on to sort containers does not perf...
How to use worker_threads to create new threads in nodejs
Introduction As mentioned in the previous article...
Alibaba Cloud applies for a free SSL certificate (https) from Cloud Shield
Because the project needs to use https service, I...
Implementation of mysql data type conversion
1. Problem There is a table as shown below, we ne...
Detailed explanation of the meaning and difference between MySQL row locks and table locks
1. Introduction The difference between row locks ...