1、尝试实现js hover效果

• 实现后的效果展示
• 初始状态

• 鼠标移动到第一个 状态

• 鼠标移动到第二个状态

2、代码怎么是实现 ？

html
核心结构 
         <div id="mydiv1">
            <div class="container4_0_p3" id="container4_0_p3" >客户操作</div>
            <img class="container4_0_p3_i1" id="container4_0_p3_i1" src="./imgs/container4_icon1_center.png" alt="">
          </div>
          <div  id="mydiv2">
            <div class="container4_0_p4"  id="container4_0_p4">黑格操作</div>
          <img class="container4_0_p3_i2" id="container4_0_p3_i2" src="./imgs/container4_icon1_center.png" alt="">
          </div>




css




js  

  mounted() {

    window.onload = function () {
      var cover = document.getElementById("cover");
      var cover_1 = document.getElementById("cover_1");
      var container4_0_p3 = document.getElementById("container4_0_p3");
      var mydiv1 = document.getElementById("mydiv1");
      var mydiv2 = document.getElementById("mydiv2");
      var container4_0_p4 = document.getElementById("container4_0_p4");
      var container4_0_p3_i1 = document.getElementById("container4_0_p3_i1");
      var container4_0_p2 = document.getElementById("container4_0_p2");
      var container4_0_p3_i2 = document.getElementById("container4_0_p3_i2");
      var container4 = document.getElementById("container4");
      container4_0_p3_i1.style.display = 'none'
      container4_0_p3_i2.style.display = 'none'
      container4_0_p3.style.color = '#999'
      container4_0_p3.style.color = '#999'
      cover_1.style.display = 'none'
      cover.style.display = 'none'

      mydiv1.onmouseover = function () {
        console.log(11)
        container4_0_p3_i1.style.display = 'block'
        container4_0_p3.style.display = 'block'
    
        container4_0_p3.style.color = '#3760EA'
        container4_0_p3_i2.style.display = 'none'
        cover.style.display = 'block'
        cover_1.style.display = 'none'

        mydiv1.style.zIndex = 1
      }
      mydiv1.onmouseout = function () {
        container4_0_p3_i1.style.display = 'none'
        console.log(22)
        mydiv1.style.zIndex = 0
        container4_0_p3.style.color = '#999'

      }
      mydiv2.onmouseout = function () {
        container4_0_p3_i1.style.display = 'none'
 
        container4_0_p4.style.color = '#999'

      }
      mydiv2.onmouseover = function () {

        container4_0_p3_i2.style.display = 'block'
        container4_0_p3_i1.style.display = 'none'
        container4_0_p4.style.display = 'block'
        container4_0_p4.style.color = '#3760EA'
        cover_1.style.display = 'block'
        cover.style.display = 'none'
    
      }
  





      // }

    };
  },

3、核心思想

1、分别使用两个容器 包裹住两块区域 
2、将两块区域重叠 
3、当鼠标移出 第一块区域时候  将它的 z-index 设置为 0
4、此时第二块 z-index =1  就可以浮在上面
5、然后将文字部分移动出 各自的容器 
6、很重要的一点 需要将容器和各自的文字衔接上  这样就不会形成断层

4、赶快试试吧

• 寻思这些如何做成独立的方法