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

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

php鼠标悬浮显示,CSS3实现鼠标悬停显示扩展内容
本文给大家分享css3代码实现鼠标悬停显示要扩展的内容,在空间过于拥挤时需要隐藏部分内容使用此功能比较好,下面小编给带来了具体实现代码,一起看看吧我们在做导航标签的时候,有时会出现空间过于拥挤需要隐 ...
html5的鼠标悬浮事件,HTML5 Canvas鼠标悬停在画布上的事件
您需要使用JavaScript来创建一个鼠标悬停事件......看看这个例子 function RefreshMouseEvents(ElementId) { FireEvent(ElementId, ...
hover 鼠标悬浮改变样式
当鼠标悬浮在元素上,通过hover改变字体或背景颜色等,移开鼠标又恢复实例: http://yayihouse.com/yayishuwu/chapter/2215
layui动态生成的手风琴实现默认第一个展开+鼠标悬浮展开
嘿嘿嘿,我百度了一下,发现没有这个玩意,作为小白白的我自己摸索着成功实现了,今日好开心-耶耶耶! 首先,我是从数据库提取数据,在前端用foreach循环展示,但是,循环出来的都是统一样式,要不都是展开 ...
鼠标悬浮选中单选按钮事件
鼠标悬浮事件 onmouseover 鼠标悬浮单选框就选中鼠标悬浮显示注释框鼠标悬浮单选框就选中 <el-radio-group v-model="algorithmRadio&q ...
HTML+CSS制作鼠标悬浮上去可以放大的照片墙?
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
鼠标事件以及 onmouseover, onmouseout 鼠标移动事件动态渲染的注意点
1.onmouseover 指的是鼠标在进入某个元素的时候触发的事件 2.onmouseout 指的是鼠标在离开某个元素时触发的事件其他 onclick----------------------- ...
web前端入门到实战：CSS鼠标悬浮图片模糊切换效果
分享一段代码实例,它实现了图片的模糊效果. 默认状态下,图片是模糊的,当鼠标悬浮那么图片会恢复正常状态. 代码实例如下: <!doctype html> <html> < ...
web自动化时，怎么定位鼠标悬浮时才出现的元素
web自动化时,怎么定位鼠标悬浮时才出现的元素如图所示, 想要定位"修改密码",必须先鼠标悬浮在头像位置,才能看到修改密码,然后按正常操作在F12里就没办法定位"修改 ...
整理查找的鼠标悬浮移入移出事件
鼠标的移入移出事件: 一介绍鼠标的移入和移出事件分别是onmouseover和onmousemove事件. 其中,onmouseover事件在鼠标移动到对象上方时触发事件处理程序,onmousem ...

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

目录

1、关键代码

1.1、原生

1.2、vue

2、效果演示

3、完整代码

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

最新文章

热门文章