文章导读
大家好，今天我们来聊聊Web前端中常见的鼠标悬浮、移入和移出效果。这些效果在提升用户体验方面起着重要作用。本文将分别使用原生JavaScript和Vue.js来实现这些效果，让你对这一块有更深入的理解。
关键代码
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=