js鼠标悬停触发class名事件

来源:小凡日期:2022年4月19日

鼠标移动到指定位置,通过js改变class名,从而改变class样式

示例代码

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>js鼠标悬停触发class名事件</title>
<style type="text/css">
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div  class='ab' onmouseover="over(this)" onmouseleave="leave(this)">test div</div>
<div class='abs' onmouseover="over(this)" onmouseleave="leave(this)">test div</div>
<script>
function over(obj){
var obj = document.getElementsByClassName('ab');
for(var i=0;i<obj.length;i++){
obj[i].className = 'abc';
}
}

function leave(obj){
var obj = document.getElementsByClassName('abc');
for(var i=0;i<obj.length;i++){
obj[i].className = 'ab';
}
}
</script>
</BODY>
</HTML>
相关文章
微信咨询微信咨询
二维码
微信扫码 立即咨询
销售热线咨询热线
15202181997
立即咨询立即咨询