<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
width: 200px;
position: absolute;
left: 500px;
}
ul li {
margin-top: 10px;
cursor: pointer;
text-align: center;
font-size: 20px;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$("ul>li").mouseenter(function () {//鼠标进入事件
$(this).css("backgroundColor", "red").siblings("li").css("backgroundColor", "");
}).mouseleave(function () {//鼠标离开事件
//find函数-----寻找子元素中的... 参数可以是任意选择器
$(this).parent().find("li").css("backgroundColor", "");
}).click(function () {//点击事件
// $(this).prevAll("li").css("backgroundColor","yellow");
// $(this).nextAll("li").css("backgroundColor","blue");
//断链:对象调用方法之后,返回的已经不是当前的这个对象了,此时再调用方法,就出现了断链
//.end()方法是修复断链,恢复断链之前的状态，其实就是返回this，也就是指向最前面
//不推荐使用链式编程
$(this).prevAll("li").css("backgroundColor", "yellow").end().nextAll("li").css("backgroundColor", "blue");
});
});
</script>
</head>
<body>
<ul>
<li>青岛啤酒（TsingTao）</li>
<li>瓦伦丁（Wurenbacher）</li>
<li>雪花（SNOW）</li>
<li>奥丁格教士（Franziskaner）</li>
<li>科罗娜喜力柏龙（Paulaner）</li>
<li>嘉士伯Kaiserdom</li>
<li>罗斯福（Rochefort）</li>
<li>粉象（Delirium）</li>
<li>爱士堡（Eichbaum）</li>
<li>哈尔滨牌蓝带</li>
</ul>
</body>
</html>
|
