鼠标悬浮DIV背景色渐变，离开恢复

di4zhibiao

于 2017-02-23 21:29:50 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 前端 Jquery JavaScript 文章标签： jquery 渐变色 mouseover 定时器 javascript

本文链接：https://blog.youkuaiyun.com/di4zhibiao/article/details/56681468

前端同时被 3 个专栏收录

7 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

Jquery

5 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的鼠标悬停效果，当鼠标进入指定区域时，该区域的背景颜色会在预设的颜色中循环渐变。通过设置不同的颜色数组可以轻松地改变背景颜色的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var color=new Array(
        "#FFFFFF",
        "#FcFcFc",
        "#F0F0F0",
        "#E0E0E0",
        "#D0D0D0",
        "#BEBEBE",
        "#ADADAD",
        "#9D9D9D",
        "#7B7B7B",
        "#6C6C6C");
var i=0;
var coChangeNo;
function which(){
    if(i<color.length){
        x.css("background-color",color[i]);
        i++;
        return;
    }
}
var x ;
$(document).ready(function(){
    $("#div1").mouseover(function(e){
          x = $(e.target);
          coChangeNo = window.setInterval(which,50);
    });
    $("#div1").mouseleave(function(){
          i=0;
          clearInterval(coChangeNo);
          x.css("background-color","#FFFFFF");
          x = null;

    });

});



</script>
<STYLE type="text/css">

</STYLE>
</head>
<body>
    <div id="div1" class="div1" name="1">
        <h1>1231</h1>
    </div>
</body>
</html>