老师这样实现正不正确

首页课程实战体系课手记专栏慕课教程

老师这样实现正不正确

来源：2-8 过渡效果实战课（1）

摩苏尔

2020-11-09 13:03:42

# 具体遇到的问题

我想改成触碰图片提示就显示出来

.box ul li img:hover .info{

opacity: 1;

}

为什么没有反应

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡动画实战1</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 1200px;
        margin: 50px auto;
        overflow: hidden;
    }
    .box ul{
        list-style: none;
    }
    .box ul li{
        float: left;
        width: 380px;
        height: 350px;
        padding-right: 20px;
        position: relative;
    }
    .box ul li img{
        width: 380px;
        height: 350px;
    }
    .box ul li .info{
        position: absolute;
        bottom: 0;
        width: 360px;
        height: 50px;
        padding-left: 20px;
        line-height: 50px;
        background-color: rgba(0,0,0,.3);
        color: white;
        /* 透明度设置为0，不是背景的透明度，而是整体的透明度 ,虽然是看不到了，但它还是在原来的位置*/
        opacity: 0;
        transition:opacity 1s ease 0s;

    }
    .box ul li:hover .info{
        opacity: 1;
    }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="images/u=2853553659,1775735885&fm=26&gp=0.jpg" alt="">
                <div class="info">小猫咪</div>
            </li>
            <li><img src="images/u=2980445260,41238050&fm=26&gp=0.jpg" alt="">
                <div class="info">憨憨狗</div>
            </li>
            <li><img src="images/u=2989832003,2963819663&fm=26&gp=0.jpg" alt="">
                <div class="info">菌子</div>
            </li>
        </ul>
    </div>
</body>
</html>