<script src="js/jQuery1.11.1.js" type="text/javascript"></script>
<script type="text/javascript"> $(function(){
var lis=document.getElementsByTagName("li");
for (var i=0; i < lis.length; i++) {
lis[i].onmouseover=function(){
//第一种
// this.style.background="pink";
// this.style.fontSize="50px"
//第二种
this.style.cssText="background:pink;fontSize:50px;";
}; lis[i].onmouseout=function(){ //第一种
//this.style.background="";
//this.style.fontSize="20px"
//第二种
this.style.cssText="background:;fontSize:50px;";
};
}; }); </script>
</head>
<body>
<h1>光棒效果</h1>
<ul>
<li>好好好</li>
<li>好比好</li>
<li>好不好 </li>
</ul>
用js的两种方法，写出光棒效应，代码如上。
下面是jquery的两中方法 mouseover（） mouseout（） 与 hover（）
第一种方法：示例代码
$(function(){
var lis=$("li");
lis.mouseover(function(){
// $(this).css("background","pink")
});
lis.mouseout(function(){
$(this).css("background","")
});
});
第二种方法 代码如下：
$(function(){
var lis=$("li");
// lis.mouseover(function(){
// $(this).css("background","pink")
// });
// lis.mouseout(function(){
// $(this).css("background","")
// });
//2.hover()方法
lis.hover(function(){
$(this).css("background","pink");
},function(){
$(this).css("background","");
})
});