<!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.2.js"></script>
<script>
$(function () {
$("ul>li").mouseover(function () {
$(this).css("backgroundColor","red");
}).mouseout(function () {
$(this).parent().find("li").css("backgroundColor","");
}).click(function () {
$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
});
});
</ Script>
</ head>
<body>
<UL>
<Li> Qingdao Beer (tsingtao) </ Li>
<Li> Valentin (Wurenbacher) </ Li>
<Li> snow (SNOW) </ li>
<li> Ao Dingge priest (Franziskaner) </ li>
<li> Corona Heineken Bolong (Paulaner) </ li>
<li> Carlsberg Kaiserdom </ li>
<li> Roosevelt (Rochefort) </ li>
<li> pink elephant (Delirium) </ li>
<li> love disabilities Fort (Eichbaum) </ li>
<li> Harbin brand Blue Ribbon </ li>
</ ul>
</body>
</html>