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

原创已于 2024-09-18 16:14:46 修改 · 3.5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

于 2020-12-22 15:10:34 首次发布

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了三种使用CSS实现的鼠标悬停效果：子元素缩放、图片旋转及图片放大。通过简单的代码示例展示了如何为网页元素添加动态交互样式。

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

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

4、css悬停，背景颜色从左至右滑动

<style type="text/css">
.viewcontent__action{
	width: 100px;
    height: 50px;
    position: relative;
    line-height: 50px;
    text-align: center;
}
.viewcontent__action a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #000;
  transition: 0.3s;
  content: "";
  z-index: -1;
}
.viewcontent__action a:hover::before {
  width: 100%;
  transition: 0.3s;
  color: #fff;
}
</style>
<div class="viewcontent__action"><a href="">联系我们</a></div>