How to disable css hover-Front-end Q&A-php.cn

How to disable css hover

藏色散人

Release： 2020-11-17 10:58:47

Original

4070 people have browsed it

Reasons for invalidating css hover: 1. In the CSS definition, "a:hover" is not placed after "a:link" and "a:visited"; 2. In the CSS definition, " a:active" is not placed after "a:hover".

How to disable css hover

Recommended: "css video tutorial"

Several hover failures in CSS Reason:

When setting the CSS hover, sometimes you will find that hover does not work. To summarize the reasons:

Tip: In the CSS definition, a:hover must be placed It is only valid after a:link and a:visited.

Tip: In the CSS definition, a:active must be placed after a:hover to be effective.

1. Add a space before setting:hover:

For example,

<style type="text/css">  
    .one {  
        margin: 0 auto;  
        width: 400px;  
        height: 300px;  
        background: #ced05d;  
    }  
    .two {  
        margin: 0 auto;  
        width: 100px;  
        height: 100px;  
        background: #5a5aea;  
    }  
    .three {  
        margin: 0 auto;  
        width: 200px;  
        height: 100px;  
        background: #4b9c49;  
    }  
    .four {  
        margin: 0 auto;  
        width: 300px;  
        height: 100px;  
        background: #7b4141;  
    }  
    .one :hover {  
        background: #da56d0;  
    }  
</style>  
<body>  
<h1>测试</h1>  
<div class="one">  
    <div class="two">  
      
    </div>  
    <div class="three">  
          
    </div>  
    <div class="four">  
          
    </div>  
</div>  
</body>

Copy after login

You find that the background does not change when the mouse passes by class one, but it passes through other divs inside one. The background color changes.

Explanation: Adding a space before :hover will not have the effect of :hover, but the descendant elements will have the effect of :hover.

2. When the mouse passes over, let other elements change styles:

At this time, you will find that only descendant elements and sibling elements (sibling elements immediately after the element) have an effect. , Others: hover will be invalid

Still the previous example

Change

.one :hover {  
        background: #da56d0;  
    }

Copy after login

.one:hover .two {  
        background: #da56d0;  
    }

Copy after login

We found that we can achieve the effect we want## Changing

# to

.two:hover +.three {  
        background: #da56d0;  
    }

Copy after login

can also achieve the effect (note that removing the " " number will not achieve the effect)

and changing it to

.two:hover .four {  
        background: #da56d0;  
    }

Copy after login

cannot achieve the effect we have The effect (with or without the plus sign)

3. The class name is written incorrectly;

4.:hover is placed before :link and :visited;

5. You read it wrong;

Wait...

The above is the detailed content of How to disable css hover. For more information, please follow other related articles on the PHP Chinese website!

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

How to disable css hover