侧边栏二维码鼠标移入显示

这两天在想一个文本鼠标移入显示，离开隐藏。思路比较清晰，做出来的东西始终不对。现在写一个为了提醒自己以后的思路共自己学习

1. 鼠标移入前

 

 2.鼠标移入时

 

 3.鼠标离开后变回1

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>二维码</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #divId_Wrapper{
        width: 60px;
        height: 60px;
        position: fixed;
        background: url('./img/11.jpg') no-repeat;
        top: 40%;
        left: 0;
        cursor: pointer;
    }
    #divId_Content{
        position: absolute;
        left: 60px;
        top: -60%;
        display: none;
    }
    </style>
</head>
<body>
    <div id="divId_Wrapper">
        <div id="divId_Content">
            <img src="./img/22.gif" alt="" width="150px">
        </div>
    </div>

    <script>
    window.onload = function() {
        var wrapper = document.getElementById('divId_Wrapper')
        var content = document.getElementById('divId_Content')
        wrapper.onmouseover = function() {
            content.style.display = 'block'
        }
        wrapper.onmouseout = function() {
            content.style.display = 'none'
        }
    }
    </script>
</body>
</html>

 

 

 

posted @ 2019-11-24 21:56  zuiQianNian  阅读(299)  评论(0)    收藏  举报