实现效果
在这里插入图片描述
css样式

 /* 鼠标移入div放大 */
        .lczy_content_item {
            transition: all 0.3s;
        }

        .lczy_content_item:hover {
            background-color: #1975E6;
            color: #ffffff;
            cursor: pointer;
            transform: scaleY(1.1) translateZ(0);
        }

HTML代码

<div class="lczy_content_item" onmouseover="mouseOver(this,event)" onmouseout="mouseOut(this,event)">
          <span class="row_1">1</span>
           <h2 class="row_2 pt10">用户注册</h2>
           <p class="row_3">注册用户可以进行网上申报,跟踪项目办理进度,上报项目建设信息和查询项目监管信息</p>
           <p class="row_4 pt10">→</p>
 </div>
 <script>
        function mouseOver(t, e) {
            $(t).children('span:first').css({
                'background-color': '#FFFFFF',
                color: '#1975E6',
            })
        }
        function mouseOut(t,e){
            $(t).children('span:first').css({
                'background-color': '#6F6F6F',
                color: '#FFFFFF',
            })
        }
    </script>

transition 简写属性 作用:动画过渡

在这里插入图片描述

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

https://www.w3school.com.cn/cssref/pr_transform.asp
  1. 移动 tasanlate
  2. 缩放 scale
  3. 旋转 rotate
Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐