<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
$(function () {
var jqli1 = $("li:odd");
var jqli2 = $("li:even");
jqli1.css("background", "#cccccc");
jqli2.css("background", "white");
var color = "";
$("li").mouseenter(function () {
// 先把之前的颜色保存下来,鼠标离开时还原
color = $(this).css("background");
$(this).css("background", "green");
});
$("li").mouseleave(function () {
$(this).css("background", color);
});
});
</script>
</head>
<body>
<ul>
<li>生命不息,折腾不止</li>
<li>生命不息,折腾不止</li>
<li>生命不息,折腾不止</li>
<li>生命不息,折腾不止</li>
<li>生命不息,折腾不止</li>
<li>生命不息,折腾不止</li>
</ul>
</body>
</html>
jQuery案例--鼠标悬停时变色
最新推荐文章于 2021-09-27 20:57:39 发布