您的位置:首页 > Web前端 > JQuery

jquery隔行变色

2019-08-15 09:31 816 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq_42309685/article/details/99621069

隔行变色

效果如下:

CSS部分

<style>
ul {
list-style: none;
color: #fff;
}
ul li {
margin: 5px;
}
</style>

body部分

<script src="lib/jquery/jquery-3.4.1.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
$(function(){
$("li:odd").css("background","blue");
$("li:even").css("background","red");
var color = '';
$("li").mouseenter(function(){
color = $(this).css("background");
$(this).css("background","yellow");
});
$("li").mouseleave(function(){
$(this).css("background",color);
});
});
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: