Home > Article > Web Front-end > How to achieve the effect of displaying and hiding divs when the mouse is moved to divs in css3
How to achieve the effect of displaying and hiding divs when the mouse is moved to divs in css3
- WBOYOriginal
- 2021-12-07 18:15:187847browse
In CSS, you can use the ":hover" selector and opacity attribute to display or hide the div element when the mouse moves to it. The syntax is "div:hover{opacity:0}" or "div:hover{opacity:1}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
css3 How to realize the effect of displaying and hiding the div when the mouse moves to the div
1. Move the mouse to the div to display the div
Yes Use the :hover selector and opacity attribute to realize the div effect when the mouse is moved to the div. The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 380px;
height: 250px;
background-image: url(1118.02.png);
opacity: 0;
}
div:hover{
width: 380px;
height: 250px;
background-image: url(1118.02.png);
opacity: 1;
}
</style>
</head>
<body>
<div>鼠标移动到div上</div>
</body>
</html>Output result:
2. Move the mouse to div hides div
You can still use the :hover selector and opacity attribute to move the mouse to the div to display the div effect. The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 380px;
height: 250px;
background-image: url(1118.02.png);
}
div:hover{
opacity: 0;
}
</style>
</head>
<body>
<div>鼠标移动到div上</div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve the effect of displaying and hiding divs when the mouse is moved to divs in css3. For more information, please follow other related articles on the PHP Chinese website!