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

How to disable css hover

藏色散人

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

Original

4100 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!