鼠标移动到指定位置,通过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>