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

---

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);
}

鼠标移入移出事件

let rotateEnlarge = 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 文件夹