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 文件夹