前端，鼠标移上div实现悬浮效果，移出消失

自己做的样式，保存下来以免以后使用并分享出来，如果不适合你，请不要吐槽

效果如下

               

                 

 

 

实现：

1、html代码

<div @mouseenter="enter()" @mouseleave="leave()" id="div1">
  <p>待确认</p>
  <p>0</p>
</div>

2、js代码

enter(){
  document.getElementById('div1').style.backgroundColor='#F7F7F7';
  document.getElementById('div1').style.boxShadow='2px 2px 2px #4285F4'
},
leave(){
  document.getElementById('div1').style.backgroundColor='#ffffff';
  document.getElementById('div1').style.boxShadow=''
},