Home > Article > Web Front-end > How to hide the display style when the mouse passes through css
How to hide the display style when the mouse passes through css
- 青灯夜游Original
- 2022-09-22 17:49:564734browse
In CSS, you can use the ":hover" selector and the display attribute to hide the display style when the mouse passes over it; you only need to use the ":hover" selector to select the element on which the mouse pointer is floating, and give it Just set the "display:none;" style for the status element, and the syntax is "specify element:hover {display:none;}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In CSS, you can use the ":hover" selector and display attribute to hide the display style when the mouse passes.
You only need to use the ":hover" selector to select the element on which the mouse pointer is floating, and set the "display:none;" style to the element in this state to hide it.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 520px;
height: 50px;
background-color: #008000;
}
div:hover {
display:none;
}
</style>
</head>
<body>
<div>
hello
</div>
</body>
</html>
Description:
:hover selector
:hover selector is used to select the element on which the mouse pointer is floating.
Tip: The :hover selector can be used on all elements, not just links.
In the CSS definition, :hover must be placed after :link and :visited (if present) for the style to take effect.
: The link selector sets the style of links pointing to pages that have not been visited, the :visited selector is used to set links to pages that have been visited, and the :active selector is used for active links.
Usage 1:
This means: when the mouse is hovering over the style a, the background color of a is set to yellow
a:hover
{
background-color:yellow;
}This is the most common usage, it just changes the style through a
Usage 2:
Use a to control the style of other blocks:
Use a to control the child element b of a:
.a:hover .b {
background-color:blue;
}Use a to control the sibling element c (sibling element) of a:
.a:hover + .c {
color:red;
}Use a to control the nearby element d of a:
.a:hover ~ .d {
color:pink;
}To summarize:
1. Add nothing in the middle to control child elements;
2. ' ' Control sibling elements (sibling elements) ;
3. '～' controls the nearby element;
Example
Use a button to control the movement state of a box. When the mouse moves to the button When the mouse is above, the box stops moving, and when the mouse moves away, the box continues to move
body code:
<body>
<div class="btn stop">stop</div>
<div class="animation"></div>
</body>css style:
<style>
.animation {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: move 2s infinite alternate;
-webkit-animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translate(-100px, 0);
}
100% {
transform: translate(100px, 0);
}
}
.btn {
padding: 20px 50px;
background-color: pink;
color: white;
display: inline-block;
}
.stop:hover ~ .animation {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
</style>
"display:none;" style
display:none can hide the element without occupying space, so dynamically changing this attribute will cause rearrangement (change the page layout), which is understandable It is the same as deleting the element from the page; it will not be inherited by descendants, but its descendants will not be displayed. After all, they are all hidden together.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.display{
display:none;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="display">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>
（Learning video sharing: web front-end）
The above is the detailed content of How to hide the display style when the mouse passes through css. For more information, please follow other related articles on the PHP Chinese website!