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 install golang under linux
Go is an open source programming language that ma...
MySQL 8.0.13 decompression version installation and configuration method graphic tutorial
1. Installation 1. Download MySQL Download addres...
Introduction to MySQL triggers, creation of triggers and analysis of usage restrictions
This article uses examples to describe the introd...
Complete step-by-step record of MySQL 8.0.26 installation and uninstallation
Table of contents Preface 1. Installation 1. Down...
CSS techniques for achieving multi-column equal height layout that the front end should master
1. Introduction When we are writing a page, we so...
Summary of several important performance index calculation and optimization methods for MySQL
1 QPS calculation (number of queries per second) ...
How to handle long data when displaying it in html
When displaying long data in HTML, you can cut off...
MySQL 5.7.18 MSI Installation Graphics Tutorial
This article shares the MySQL 5.7.18 MSI installa...
Implementation example of react project from new creation to deployment
Start a new project This article mainly records t...
How to limit the number of records in a table in MySQL
Table of contents 1. Trigger Solution 2. Partitio...
Specific use of MySQL binlog_ignore_db parameter
Preface: After studying the previous article, we ...
jQuery achieves large-screen scrolling playback effect
This article shares the specific code of jQuery t...
Detailed explanation of asynchronous iterators in nodejs
Table of contents Preface What are asynchronous i...
Several ways to implement inheritance in JavaScript
Table of contents Structural inheritance (impleme...
Implementation of Mysql User Rights Management
1. Introduction to MySQL permissions There are 4 ...