Html js鼠标 Mouseover事件和Mouseout事件

Html js鼠标事件
Mouseover事件（重点）：鼠标移动到标签之上
Mouse 鼠标
Over 在…之上
Mouseout事件（重点）：鼠标离开标签

Var box = doucument.getElementById(“box”)
box.inmouseover=function（）{
var _this =event.target;
console.info(_this)
方法1：_this.style.background = “#f00”；
_this.style.fontsize = “30px”；
方法2.：_this.className = “mybox red”
如果你不知道原来的样式那就
_this.className += “ red”}

鼠标离开后复原
Box.onmouseout = function（）{
var _this =event.target;
var zz=/\bred\b/； \b ：单词的开始和结尾作为保护作用
var cN = _this.className;
方法1：_this.style.background = “”；设置为空值即可
_this.style.fontsize = “”；
方法2：
_this.className = “ mybox”
如果不知道类名
_this.className =cN.repalce(zz , “”)

如果原来的关键词还有red关键词
Red前面必须要有空格！！！！！

找标签
方法：
this
event.target
ID

更改样式
方法1.XX.style.background = “#f00”；
XX.style.fontsize = “30px”；
就是按着这样的思路一条一条的更改
这种方法仅用于简单少量的样式
方法2.更改类名
xx.className = “新的类名”

Html js鼠标 Mouseover事件和Mouseout事件相关推荐

mouseover事件和mouseenter事件以及mouseleave事件和mouseout事件的区别
1.mouseover事件与mouseenter事件 mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseenter事件:只有在鼠标指针穿过被选 ...
js鼠标放上去和移出事件
鼠标事件效果为鼠标移上去改变事件,移出又改变事件. 在W3Cschool找到的教程.W3Cschooljs教程:链接分享. 代码 <!DOCTYPE html> <html> ...
js 鼠标按下并移动事件
html源码: <divonMouseDown={(e) =>fn1(e)}onMouseUp={(e)=>fn2(e)}>内容</div> js源码 fn1(ev ...
mouseover事件mouseenter事件mouseleave事件和mouseout事件之间的区别与联系
文章目录两者定义两两区别例子小结两者定义 mouseover:鼠标覆盖 mouseenter:鼠标进入 mouseleave:鼠标移出 mouseout:鼠标移出两两区别既会捕获也会冒泡 ...
JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别
JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别 mouseout: mouseout是由子元素冒泡而来鼠标指针位于一个元素上方,然后用户将其移入另一 ...
js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?
1. 鼠标事件 mouseenter mouseleave (一对事件鼠标的进入和离开) 不支持冒泡 mouseenter:鼠标从元素外部移到元素内部时触发. mouseleave:鼠标从元素内部移 ...
[css] 鼠标事件css的:hover和js的mouseover有什么区别？
[css] 鼠标事件css的:hover和js的mouseover有什么区别? JavaScript中鼠标事件有:onmouseover和onmouseout: 当鼠标移入和移出时触发事件onmous ...
mouseover和mouseout事件在鼠标经过子元素时也会触发
javascript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jquery解决办法: jquer ...
[转载 js] YUI解决mouseout事件冒泡的办法
原文出处:http://design.alibaba-inc.com/?q=node/727 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ YAHOO.util.D ...

Html js鼠标 Mouseover事件和Mouseout事件

Html js鼠标 Mouseover事件和Mouseout事件相关推荐

最新文章

热门文章