<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{ list-style-type: none; cursor: pointer; /*font-family: 宋体;*/ }
</style>
</head>
<body>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$(".ham").mouseenter(function () {
$(".ham").next("li").css("backgroundColor","red");//下一个兄弟元素
$(".ham").nextAll("li").css("font-size","30px");//后面所有的兄弟元素
$(".ham").prev("li").css("font-style","italic");//前一个兄弟元素
$(".ham").prevAll("li").css("font-weight","bolder");//前面所有的兄弟元素
$(".ham").siblings("li").css("font-family","宋体");//所有的兄弟元素
});
$(".ham").mouseleave(function () {
$(".ham").next("li").css("backgroundColor","");
$(".ham").nextAll("li").css("font-size","");
$(".ham").prev("li").css("font-style","");
$(".ham").prevAll("li").css("font-weight","");
$(".ham").siblings("li").css("font-family","");
});
});
</script>
<ul>
<li>哈姆雷特</li>
<li>哈姆雷特</li>
<li class="ham">哈姆雷特</li>
<li>哈姆雷特</li>
<li>哈姆雷特</li>
<li>哈姆雷特</li>
<li>哈姆雷特</li>
<li>哈姆雷特</li>
</ul>
</body>
</html>
网友评论