css鼠标悬停事件,css鼠标悬停特效

 1、css父元素hover悬停 子元素缩放

.col-lg-4 img{  
     cursor: pointer;  
     transition: all 1s ease;  
}  
.col-lg-4:hover img{  
    transform: scale(1.2); 
	opacity: 0.5;
}
.col-lg-4:hover div:nth-child(2){
	bottom: 8px;
}
.col-lg-4 div:nth-child(2){
	cursor: pointer;  
    transition: all 1s ease;  
}

2、css鼠标悬停图片旋转

.dingzhi_bottom img:hover{
	transform:rotate(360deg);
    -ms-transform:rotate(360deg); 	/* IE 9 */
    -moz-transform:rotate(360deg); 	/* Firefox */
    -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
    -o-transform:rotate(360deg); 
    transition: all 0.6s;	/* Opera */
}

3、css鼠标悬停图片放大

div{  
   width: 300px;  
   height: 300px;  
   border: #000 solid 1px;  
   margin: 50px auto;  
   overflow: hidden;  
}  
div img{  
   cursor: pointer;  
   transition: all 0.6s;  
}  
div img:hover{  
    transform: scale(1.4);  
} 

 

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

永远的WEB小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值