jquery遍历数组/添加鼠标滑动事件-添加/移除属性

最新推荐文章于 2024-05-13 15:40:07 发布

原创最新推荐文章于 2024-05-13 15:40:07 发布 · 756 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

40 篇文章

订阅专栏

23 篇文章

订阅专栏

本文介绍如何使用jQuery为网页元素实现鼠标悬停时的样式变化，包括背景颜色切换及阴影效果。通过简单的代码示例展示了如何给div元素添加鼠标进入和离开时的不同样式。

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

<!DOCTYPE  HTML>
<html >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jquery遍历数组/添加鼠标滑动事件-添加/移除属性</title>
  <style type="text/css">
  *{
    padding:0;
    margin:0;
  }
  div{
    margin:50px auto;
    width: 300px;
    height: 270px;
    background: #f6f9fa;
  }
</style>


  </head>
  <body>
      <div></div>


<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
   $('div').each(function(index,item){
        // 鼠标移入时，div背景变成白色、加阴影
        $(this).mouseover(function(){
                $(this).css({"background-color":"#FFF",
                  "box-shadow":"0px -1px 10px 3px rgba(24,199,255,0.05),"+ //上边
                  "-1px 0px 10px 3px rgba(24,199,255,0.05),"+ //左边
                  "0px 1px 10px 3px rgba(24,199,255,0.05),"+ //下边
                  "1px 0px 10px 3px rgba(24,199,255,0.05)"}); //右边
        });
        //鼠标移出时，复原
        $(this).mouseout(function(){
                $(this).css({"background-color":"#f6f9fa","box-shadow":"none"});
        });
    });   
</script>
</body>
</html>