<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('li').hover(function () {//移上
$(this).css('background-color', 'red')
.prevAll()//这个方法找到当前节点的所有节点，破坏了当前的链
.css('background-color', 'yellow')
.end()//恢复最近的一次链的破坏
.nextAll()
.css('background-color', 'blue')
;
}, function () {//移开
$(this).css('background-color', 'white')
.siblings().css('background-color', 'white');//获取左右的兄弟节点
});
});
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</body>
</html>
相关文章：