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

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

不透明度： 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>

posted @ 2021-11-21 16:58  絮行  阅读(955)  评论(0)    收藏  举报