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前面必须要有空格!!!!!

  1. 找标签
    方法:
    this
    event.target
    ID

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值