<html>
<head>
<title></title>
<script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
;(function($){
$.fn.extend({
'focusColor':function(li_col){
var outColor='#fff';
var overColor=li_col||'#ccc';
$(this).find('li').bind('mouseover',function(){
$(this).css({'background-color':overColor});
}).bind('mouseout',function(){
$(this).css({'background-color':outColor});
});
}
});
})(jQuery);
</script>
<style>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color: Blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
#divtest .content
{
padding: 8px 0px;
background-color: #fff;
font-size: 13px;
}
ul
{
list-style-type: none;
padding: 5px 0px;
margin: 0px;
font-size: 14px;
}
ul li
{
height: 23px;
line-height: 23px;
padding: 3px 8px;
}
ul li span
{
margin-right: 30px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
</style>
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">对象级别的插件</span>
</div>
<div class="content">
<ul id="u1">
<li><span>橘子</span><span>水果</span></li>
<li><span>芹菜</span><span>蔬菜</span></li>
<li><span>香蕉</span><span>水果</span></li>
</ul>
</div>
<script type="text/javascript">
$('.content').focusColor();
</script>
</div>
</body>
</html>
bobo_weiqi
2014-10-10
举报
0/150
提交
取消
