html 鼠标移到div上，鼠标变成手指状，并且div放大

ゝ一纸荒年。 2023-06-16 08:13 8阅读 0赞

1、html代码

<div class="contentDiv2">
    	<div style="background-color: #F5BD34"><i class="iconfont icon-wa" ></i></div>
    	<p>xxxx报表</p>
    </div>

2、css代码

.div {
    	border-radius:30px;
    	cursor: pointer;/*鼠标变成手指样式*/
    	transition: all 0.6s;/*所有属性变化在0.6秒内执行动画*/
    }
    .div:hover{
    	transform: scale(1.3);/*鼠标放上之后元素变成1.4倍大小*/
    }

3、效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70][]       ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 1][]

手指效果，截图不出来，但是大小效果明显

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191125161902450.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191125161932462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDg0MTczMQ==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 鼠标悬浮时变成小手指

只需要在需要的地方添加以下css样式即可： .buttons { cursor: pointer;//悬浮时变手指

爱被打了一巴掌/ 2023年06月25日 03:12/ 0 赞/ 30 阅读

相关 html 鼠标移到div上，鼠标变成手指状，并且div放大

1、html代码 <div class="contentDiv2"> <div style="background-color: F5BD34"><i cl

ゝ一纸荒年。/ 2023年06月16日 08:13/ 0 赞/ 9 阅读

相关前端，鼠标移上div实现悬浮效果，移出消失

自己做的样式，保存下来以免以后使用并分享出来，如果不适合你，请不要吐槽效果如下 ![watermark_type_ZmFuZ3poZW5n

逃离我推掉我的手/ 2023年06月16日 08:11/ 0 赞/ 18 阅读

相关【CSS系列】鼠标移入 div图片无缝放大动画

效果图 ![在这里插入图片描述][20200819094826959.png_pic_center] .img { transition: tran

古城微笑少年丶/ 2022年11月29日 03:19/ 0 赞/ 264 阅读

相关 jquery鼠标移上div切换

样式： .tb_box{ padding:20px; position: absolute; left:0; right:0; width: 50%;margin:a

偏执的太偏执、/ 2022年07月21日 02:17/ 0 赞/ 202 阅读

相关 div随鼠标晃动

(function(){ var bannerWrap = document.querySelector('.top1'),

布满荆棘的人生/ 2022年06月02日 05:42/ 0 赞/ 193 阅读

相关 CSS3 动画-- 鼠标移上去，div 会旋转、放大、移动

原文出处：[https://www.cnblogs.com/arealy/p/7737051.html][https_www.cnblogs.com_arealy_p_7737

超、凢脫俗/ 2022年05月10日 21:56/ 0 赞/ 367 阅读

相关鼠标放在图片或者div上图片/div会上浮，移走鼠标会回到原来的位置

根据CSS3里面的动画属性，结合Jquery实现简单的图片特效 html代码 ![20190417165847143.png][] js代码 // 鼠标放在图片上图片上

清疚/ 2022年02月18日 14:37/ 0 赞/ 258 阅读

相关 vue实现鼠标移入移出显示或者隐藏div

我的qq 2038373094 效果如下 ![2019050714084878.gif][] -------------------- html代码

叁歲伎倆/ 2022年02月04日 09:23/ 1 赞/ 1817 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 497 阅读