Web前端之鼠标悬浮，鼠标移入和鼠标移出、getElementById、onmouseover、onmouseout、mouseenter、mouseleave、hover

1、关键代码

1.1、原生

鼠标经过（:hover）

.rotate_enlarge{border-left:30px solid #0000ff;border-top:30px solid #ff0000;border-right:30px solid #00ff00;border-bottom:30px solid #FFFF00;border-radius:10%;width:60px;height:60px;line-height:60px;background-color:transparent;}.rotate_enlarge:hover{transform:rotate(360deg)scale(1.2);-webkit-transform:rotate(360deg)scale(1.2);-moz-transform:rotate(360deg)scale(1.2);-o-transform:rotate(360deg)scale(1.2);-ms-transform:rotate(360deg)scale(1.2);}

鼠标移入移出事件

letrotateEnlarge=document.getElementById('rotateEnlarge');rotateEnlarge.onmouseover=function(){console.log('鼠标移入旋转放大元素');};rotateEnlarge.onmouseout=function(){console.log('鼠标移出旋转放大元素');};

1.2、Vue

鼠标经过（:hover）

.mouseover_mouseleave{width:120px;height:120px;line-height:120px;text-align:center;background-color:#ff0000;color:#333;}.mouseover_mouseleave:hover{background-color:#0000ff;color:#eee;}

鼠标移入移出事件

<div><div@mouseenter="mouseOver">移入</div><div@mouseleave="mouseLeave">移出</div></div>

// 移入mouseOver(){this.msg="";clearTimeout(this.times);this.msg="鼠标移入";},// 移出mouseLeave(){this.msg="鼠标移出";this.times=setTimeout(()=>{this.msg="";},1000);},

注意：当这两个方法绑定在组件上时，需要使用native来修饰。

<chi @mouseenter.native="mouseOvers"@mouseleave.native="mouseLeave"></chi>

2、效果演示

3、完整代码

gitee(码云) - mj01分支 - hover_onmouseover_onmouseout 文件夹