圆弧四角div悬浮时增亮加阴影

最新推荐文章于 2023-01-17 13:58:19 发布

原创最新推荐文章于 2023-01-17 13:58:19 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS在鼠标悬停时为带有圆角的div添加亮点和阴影效果，探讨了相关CSS属性如box-shadow、transition的用法，以及实现动态变化的技巧。

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

<div class="divNeedHover" style="margin-left: -1px; border-radius:15px; background-color:#4ebddc;  margin-top: 2px; cursor: pointer; border:0px solid rgba(200,200,200,0.25); width: 300px; height: 145px; background-repeat: no-repeat;" >
      <div style="width: 100%; padding-top: 30px; text-align:center; ">
           <span class="datashow" style="color:white; display:block; margin-bottom:20px">用户总人数（人）</span>
           <span class="datashow" style="color:white; font-size:40px;  margin-left:60px;">2200</span>
           <span class="datashow" style="color:white; margin-left:60px">↑10</span>
      </div>
</div>

<script>
C.ready(function () {
            $('.divNeedHover').hover(function () {
                $(this).css('background-color', '#56c8e8');
                $(this).css('box-shadow', '10px 10px 5px #888888');
            }, function () {
                $(this).css('background-color', '#4ebddc');
                $(this).css('box-shadow', '');
            });
        });
</script>