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;
}to
.one:hover .two {
background: #da56d0;
}We found that we can achieve the effect we want## Changing
# to.two:hover +.three {
background: #da56d0;
}.two:hover .four {
background: #da56d0;
}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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
