Home > Article > Web Front-end > How to achieve the display and leave-hide effect when the mouse passes through css
How to achieve the display and leave-hide effect when the mouse passes through css
- 青灯夜游Original
- 2021-11-09 17:22:5810631browse
Implementation method: 1. Add the "display: none;" style to the element and hide the element first; 2. Use the ":hover" selector and "display:block;" style to set the mouse over display effect , the syntax is "parent element:hover element {display:block;}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css to realize the display and leave-hide effect after the mouse passes over it
Implementation idea:
First put the element Hide;
Then use the "
:hover" selector to set the mouse passing style--display element
implementation Code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 520px;
height: 50px;
background-color: #008000;
}
span{
color: azure;
display: none;
}
div:hover span{
display:block;
}
</style>
</head>
<body>
<div>
<span>hello</span>
</div>
</body>
</html>Rendering:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve the display and leave-hide effect when the mouse passes through css. For more information, please follow other related articles on the PHP Chinese website!