JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
  <div id="div2">分享到</div>
</div>

CSS

#div1 {
         width: 100px;
         height: 200px;
         background: red;
         position: absolute;
         left: -100px;
         top: 100px;
       }
       
       #div2 {
         width: 30px;
         height: 60px;
         position: absolute;
         right: -30px;
         top: 70px;
         background: #000000;
         color: #ffffff;
         text-align: center;
       }

JavaScript

var oDiv = document.getElementById('div1');
oDiv.onmouseover = function() {
  this.style.left = 0 + 'px'; //鼠标移动到div2时，div2接收到over、out事件时它自己不做，传播给父级div1执行
}
oDiv.onmouseout = function() {
  this.style.left = -100 + 'px';
}