<!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函數(shù)-----尋找子元素中的... 參數(shù)可以是任意選擇器
$(this).parent().find("li").css("backgroundColor", "");
}).click(function () {//點擊事件
// $(this).prevAll("li").css("backgroundColor","yellow");
// $(this).nextAll("li").css("backgroundColor","blue");
//斷鏈:對象調(diào)用方法之后,返回的已經(jīng)不是當前的這個對象了,此時再調(diào)用方法,就出現(xiàn)了斷鏈
//.end()方法是修復(fù)斷鏈,恢復(fù)斷鏈之前的狀態(tài)，其實就是返回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>
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
