css3实现鼠标移动到div时显示另外隐藏div效果的详细办法

洪七公 · 发表于 2023-3-29 19:49:01

本篇内容介绍了“css3实现鼠标移动到div时显示另外隐藏div效果的详细办法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

在CSS中，可以利用“:hover”选择器和opacity属性实现鼠标移动到div元素时，显示或隐藏div元素的效果，语法为“div:hover{opacity:0}”或者“div:hover{opacity:1}”。

本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

css3怎样实现鼠标移动到div显示隐藏div效果

1、鼠标移动到div显示div

可以利用:hover选择器和opacity属性实现鼠标移动到div显示div效果，示例如下：

<!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>

复制代码

2、鼠标移动到div隐藏div

还是可以利用:hover选择器和opacity属性实现鼠标移动到div显示div效果，示例如下：

<!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>

复制代码

		自动登录	找回密码
密码			会员注册

[CSS/Html] css3实现鼠标移动到div时显示另外隐藏div效果的详细办法