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!
Controlling other tags (based on the relationship between the controlling tag and the controlled tag) can be divided into three types as follows:

The control tag in this article is .div1
The controlled tag is .div2

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:

Control sub-tags	Use spaces between
Controls the sibling label that is right behind	Use "+" in the middle
Control any subsequent sibling tags	Use "~" in the middle

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

Solution to the problem that the Vue page image does not display

Recommend

A detailed guide to custom directives in Vue

Table of contents 1. What is a custom instruction...

A simple method to regularly delete expired data records in MySQL

1. After connecting and logging in to MySQL, firs...

JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function

Overview: I drew lessons from several timetable s...

Example code for changing the style of other tags by hovering the mouse using CSS

Solution to the problem that the Vue page image does not display

Some methods to optimize query speed when MySQL processes massive data

MySQL 5.7.16 installation and configuration method graphic tutorial (Ubuntu 16.04)

JS realizes automatic playback of timeline

Introduction to CSS style introduction methods and their advantages and disadvantages

Summary of common commands for Linux user and group management

Example code for implementing bottom alignment in multiple ways with CSS

Navicat Premium operates MySQL database (executes sql statements)

Summary of several situations in which MySQL indexes fail

Detailed explanation of various methods of Vue component communication

Recommend

A detailed guide to custom directives in Vue

A simple method to regularly delete expired data records in MySQL

JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function

Detailed process of creating a VR panoramic project using React and Threejs

Professional and non-professional web design

Simple usage example of vue recursive component

Example code of the spread operator and its application in JavaScript

Detailed explanation of keywords and reserved words in MySQL 5.7

How to install mysql8.0.23 under win10 and solve the problem of "the service does not respond to the control function"

Web form creation skills

HTML tbody usage

CSS scroll-snap scroll event stop and element position detection implementation

In-depth analysis of Vue's responsive principle and bidirectional data

Solve the problem of docker pull being reset

A collection of information about forms and form submission operations in HTML