需求:鼠标移入移出改变标签的颜色
基于jQuery我写了4种解决方案,在此记录下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移动改变标签颜色</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 300px auto;
}
.c1 {
width: 200px;
height: 200px;
background-color: crimson;
}
</style>
</head>
<body>
<div id="d1">美女,你好!</div>
<script src="../js/jquery-3.4.1.min.js"></script>
<script>
//鼠标移入d1,变成粉色;鼠标移出d1,变成绿色
/*
方案一:
$("#d1").mouseover(function () {
$(this).addClass("c1");
});
$("#d1").mouseout(function () {
$(this).removeClass("c1");
});*/
/*
方案二:
$("#d1").mouseover(function () {
$(this).toggleClass("c1");
});
$("#d1").mouseout(function () {
$(this).toggleClass("c1");
});*/
/*
方案三:
$("#d1").mouseover(function () {
$(this).toggleClass("c1");
}).mouseout(function () {
$(this).toggleClass("c1");
});*/
//最终方案:
$("#d1").hover(function () {
$(this).toggleClass("c1");
})
</script>
</body>
</html>
addClass
是给标签添加class属性
removeClass
是给标签删除class属性
toggleClass
是切换class属性,如果原本有这个class属性值,那么就删除, 如果没有,那么就加上
hover
是鼠标移出移入都触发的事件对同一个标签对象操作,可以直接在后面以
流
的方式使用, 这点和java中的Stream流
一样