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);  
} 

猜你喜欢

转载自blog.csdn.net/qq_39339179/article/details/111554403