实现效果如图::
html结构代码:
<ul id="ul1">
<li>我是第1个li标签</li>
<li>我是第2个li标签</li>
<li>我是第3个li标签</li>
<li>我是第4个li标签</li>
<li>我是第5个li标签</li>
<li>我是第6个li标签</li>
<li>我是第7个li标签</li>
<li>我是第8个li标签</li>
<li>我是第9个li标签</li>
<li>我是第10个li标签</li>
</ul>
完整的JQuery:
<script src="jquery-1.12.4.js"></script>
<script>
$ ( function () {
//1.把奇数行li标签的背景色设置为天蓝色.
$('li:odd').css('backgroundColor','skyblue');
//2.把偶数行li标签的背景色设置为红色.
$('li:even').css('backgroundColor','red');
//3. 鼠标移入事件
var bgColor=null;//先声明一个变量把颜色存起来
$('li').mouseover(function ( ) {
// 3.1在鼠标移入到这个li标签时,没有改变颜色之前,把他之前的颜色给记录下来.
bgColor=$(this).css('backgroundColor');
$(this).css('backgroundColor','green')
})
//4. 鼠标移出事件
$('li').mouseout(function ( ) {
$(this).css('backgroundColor',bgColor)
})
} )
</script>