Home >Web Front-end >Front-end Q&A >How to disable css hover

How to disable css hover

藏色散人Original: 2020-11-17 10:58:474146browse

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".

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>

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;  
    }

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

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

# to

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

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

and changing it to

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What to do if css web page is garbledNext article：What to do if css web page is garbled

See more

How to disable css hover

Related articles