前端学习笔记JavaScript - 移入显示内容

• 效果图

html代码

<div class="main">
  <ul>
    <li>Q</li>
    <li class="weixin">W</li>
    <li>W</li>
  </ul>

  <div class="code-div">
    <p>扫描二维码</p>
    <img src="image/IMG_6708.jpg" alt="">
  </div>
</div>

css代码

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    ul {
      list-style: none;
      width: 40px;
      height: 120px;
      background-color: cornflowerblue;
      border-radius: 2px;

    }
    ul li {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
    }

    .code-div {
      width: 220px;
      height: 240px;
      background-color: lightgray;
      box-sizing: border-box;
      padding: 0 10px 0 10px;
      border-radius: 3px;
      right: 60px;
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      display: none;

    }

    .code-div img {
      width: 200px;
    }

    .code-div p {
      height: 30px;
      line-height: 30px;
    }
  </style>

javascript代码

<script>
    let weixin = document.querySelector(".weixin");
    let codeImg = document.querySelector(".code-div");
    weixin.onmouseenter = function () {
      console.log("哈哈哈");
      codeImg.style.display = "block";
    }
    weixin.onmouseleave = function () {
      codeImg.style.display = "none";
    }
  </script>