<!-- 手风琴：
1. 一个横向ul有序列表，鼠标移到其中的li时，li的宽度增加
2. 在ul里，鼠标移出li时，li宽度变为正常
3. 当鼠标在ul外时，所有li宽度正常 -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="jquery-1.12.1.min.js"></script><script>$(function () {$(".con").mouseover(function () {$(this).css("width", "800px").siblings("li").css("width", "150px");});$(".con").mouseout(function () {$(this).css("width", "150px");});})</script><style>#outer {border: 1px solid black;list-style: none;height: 500px;width: 1500px;padding: 0px;}.con {height: 500px;width: 150px;border: 1px solid black;display: inline-block;cursor: pointer;margin: 0px;}</style>
</head><body><ul id="outer"><li class="con"></li><li class="con"></li><li class="con"></li><li class="con"></li><li class="con"></li></ul>
</body></html>
