老师请您帮忙检查一下代码

老师请您帮忙检查一下代码

相关代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡效果实战课</title>
    <style>
       *{
           padding:0;
           margin:0;
       }
       a{
           text-decoration: none;
       }
       .imge{
           width:600px;
           height:200px;
           margin:100px auto;
           border: 1px solid #000;
           position: relative;
       }
       .imge .info img{
           width:600px;
           height:200px;
       }
       .imge .info .box{
           width: 600px;
           height: 40px;
           color:white;
           position: absolute;
           bottom:0px;
           text-align: center;
           line-height: 40px;
           background-color: rgba(0,0,0,.5);
           opacity: 0;
           transition: opacity 1s linear 0s;
       }
       .imge .into img:hover .box{
           opacity:100%;
         
       }
    </style>
</head>
<body>
    <div class="imge">
       <div class="info">
          <img src="images/bb3.jpg">
          <div class="box">
               <p>清华大学自习室</p>
          </div>
        </div>
    </div>
</body>
</html>

问题描述:

老师我想实现过渡实战课中的碰到照片就显示下方文字为什么显示不成功呢?请您帮忙检查一下谢谢


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2021-08-27 10:27:51

同学你好,这边测试效果没问题

http://img1.sycdn.imooc.com//climg/61284d6009ec380707090295.jpg

+左右如果有空格的话,删掉试试

http://img1.sycdn.imooc.com//climg/61284d6b09667e5e03820083.jpg

如果还是不可以的话,建议将自己修改后的代码粘贴上来,老师帮助测试下。

好帮手慕慕子 2021-08-26 11:15:37

同学你好,首先,info单词写成了into,然后,在html结构中,img和box是兄弟元素,而css中 .imge .info img:hover  .box这种写法,使用空格隔开img和box,表示选择img的后代元素box,导致无法选择到box元素,所以无法实现效果。

建议使用相邻兄弟选择元素 + 来选择box元素,示例:

http://img1.sycdn.imooc.com//climg/61270753097bd36906650141.jpg

祝学习愉快~


  • 提问者 慕粉1924517932 #1

    老师依然是实现不了碰到显示那种效果啊


    2021-08-27 08:21:38
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师