如何利用CSS在网页中达到鼠标悬浮到的地方，盒子里的内容从无到有的效果

本文转载自查看原文 2021-11-21 16:58 807 css/ html

其实这个问题很简单，只需要使用一个样式：

不透明度： opacity: 数值.(值愈大,不透明度越高)

例:

有2个盒子，b在a内部,分别给2个盒子设置一个背景色,要求效果是一开始只显示a, 但当鼠标悬浮在a上时b 出现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #a{
            width: 200px;
            height: 200px;
            background: lightblue;
        }
        
        #a>#b{
            width: 70px;
            height: 70px;
            background: red; opacity:0;
            transition: all .3s linear;
        }
        #a:hover>#b{ opacity: 1;
        }
    </style>
</head>
<body>
    <div id="a">
        <div id="b"></div>
    </div>
</body>
</html>

从代码中我们可以看出，我们先给盒子b加了一个opacity:0;，这使他的不透明度变为0，就是相当于是盒子b透明了.

在给a加了hover之后，盒子b的变成了 opacity: 1;，不透明度变成了1，这时鼠标悬浮在盒子a上时，就可以看到盒子b出现

效果如图:

同理,可以把两个盒子换成图片文字等

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css"> #a{ width: 200px; height: 200px; background: lightblue;} #a>#b{ width: 70px; height: 70px; background: red; opacity:0; transition: all .3s linear;} #a:hover>#b{ opacity: 1;}</style></head><body><div id="a"><div id="b"></div></div></body></html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 盒子box在网页中居中的方法 css3 鼠标悬浮动画效果 CSS设置div样式（鼠标悬浮效果） css实现鼠标悬浮后的提示效果 CSS 利用transform达到居中效果在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript 鼠标悬浮提示效果浅谈CSS和JQuery实现鼠标悬浮图片放大效果 CSS3按钮鼠标悬浮光圈效果利用CSS变量实现炫酷的悬浮效果