鼠标移入移出双击单击事件

- 日理万妓 2021-09-18 14:44 578阅读 0赞

qq交流群： 581478349

<!DOCTYPE html>
    <html>
    
    	<head>
    		
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	
    	</head>
    
    	<div id="xuanzhuang">效果</div>
    
    
    	</body> 
    	<script type="text/javascript">
    
    		//函数
    		function aaa() {
    			//鼠标移入
    			document.getElementById("xuanzhuang").onmouseover = function() {
    				console.log(this)
    				document.getElementById("xuanzhuang").style.backgroundColor = "green";
    			}
    			//鼠标移出
    			document.getElementById("xuanzhuang").onmouseout = function() {
    				console.log(this)
    				document.getElementById("xuanzhuang").style.backgroundColor = "red";
    			}
    			//单击
    			document.getElementById("xuanzhuang").onclick = function() {
    				console.log(this)
    				document.getElementById("xuanzhuang").style.backgroundColor = "yellowgreen";
    			}
    			//双击
    			document.getElementById("xuanzhuang").ondblclick = function() {
    				console.log(this)
    				document.getElementById("xuanzhuang").style.backgroundColor = "#ccc";
    			}
    		}
    		//调用函数
    		aaa();
    
    		
    	</script>
    
    </html>

承接web前端开发：

v:![20190220203507663.png][]![20190220203509928.png][]

[20190220203507663.png]: https://img-blog.csdnimg.cn/20190220203507663.png
[20190220203509928.png]: /images/20210724/9dca416eecbf47b18ff580dc8bfa29e9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，578人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript——鼠标移入移出事件

onmouseenter / onmouseleave 和 onmouseover / onmouseout的关系 onmouseenter 类似 mouseover，它

àì夳堔傛蜴生んèń/ 2023年06月27日 04:25/ 0 赞/ 257 阅读

相关鼠标移入/移出改变样式

鼠标移入/移出改变样式 -------------------- 实现效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGV

我会带着你远行/ 2023年06月11日 06:20/ 0 赞/ 134 阅读

相关 echarts：鼠标移入移出，颜色渐变

简单的方式 normal:{ //静态模式下显示的默认样式 textStyle:{ color:'red' } },

Love The Way You Lie/ 2023年06月10日 03:29/ 0 赞/ 81 阅读

相关 vue实现移入移出事件

移入显示,移出隐藏,废话不多说直接上代码 <ul class="tab-ul"> <li v-for="(item, index) in labelShow

超、凢脫俗/ 2023年05月30日 09:26/ 0 赞/ 29 阅读

相关页面鼠标移入移出、点击显示隐藏的处理

我们在页面开发中比较常见的功能是鼠标移入移出，或点击时，需要特定元素显示或隐藏的操作，实现方法很多，下面给出比较通用的方法注：需要页面引入jquery，这个不用多说。页

àì夳堔傛蜴生んèń/ 2022年11月05日 10:57/ 0 赞/ 395 阅读

相关 Vue中鼠标移入移出事件-解析

> 鼠标在li上移动也会触发移出事件两组鼠标事件 > mouseover 和 mouseout > mouseenter 和 mouseleave mous

你的名字/ 2022年09月10日 14:24/ 0 赞/ 442 阅读

相关鼠标的移入移出事件

一介绍鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事件在鼠标移动到对象上方时触发事件处理程序，onmou

你的名字/ 2022年05月11日 23:58/ 0 赞/ 831 阅读

相关 Vue 框架-02-事件：点击, 双击事件,鼠标移上事件

Vue 框架-02-事件：点击, 双击事件,鼠标移上事件 1.单击事件：v-on:click ![20181107153425544.gif][] 源码 app2

朴灿烈づ我的快乐病毒、/ 2022年04月18日 02:58/ 0 赞/ 499 阅读

相关 javascript 鼠标移入移出改变图片透明度

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

青旅半醒/ 2021年11月22日 09:32/ 0 赞/ 541 阅读

相关鼠标移入移出双击单击事件

qq交流群： 581478349 <!DOCTYPE html> <html> <head>

- 日理万妓/ 2021年09月18日 14:44/ 0 赞/ 579 阅读