itanℒ 2019-07-13 15:57 采纳率: 64.1%
浏览 507
已采纳

css鼠标触摸实现过渡效果.........

图片说明

最开始图片是这样的

图片说明

鼠标触摸上去 右边来了一张比较大的图片

图片说明

这个效果是 鼠标触摸在小图片上 右边出现一张大图 并且小图片从上到下会有一个灰色的背景从上到下慢慢出来的过渡效果 问题就是这 请大佬给予详细代码我粘贴复制到开发工具中看效果 谢谢 ！

  • 写回答

1条回答 默认 最新

  • 一只成序源 2019-07-15 09:16
    关注
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        #img1{
            width:50px;
            height: 50px;
        }
        #mask{
            width: 50px;
            height: 50px;
            background: rgba(0,0,0,0.7);
            text-align: center;
            line-height: 50px;
            color: white;
            position: absolute;
            display: none;
        }

        #img2{
            width: 200px;
            height: 200px;
        }
        #div2{
            display: none;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.0.js" ></script>
    <body>
        <div id="div1">
            <div id="mask">id:128</div>
            <img id="img1" class="img2" src="http://img5.duitang.com/uploads/item/201411/17/20141117214405_GESiY.jpeg"  />
        </div>
        <div id="div2">
            <img id="img2" class="img2" src="http://img5.duitang.com/uploads/item/201411/17/20141117214405_GESiY.jpeg"  />
        </div>

    </body>
    <script>
        $(function(){
            $("#img1").mouseover(function(){
                $("#mask").slideDown("slow");
                $("#div2").css("display","block");
            });
            $("#mask").mouseout(function(){
                $("#mask").slideUp("slow");
                $("#div2").css("display","none");
            });
        })
    </script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog