Hover伪类实用特效

最新推荐文章于 2024-04-09 16:36:35 发布

亿米酒酒

最新推荐文章于 2024-04-09 16:36:35 发布

阅读量1.2k

点赞数 2

分类专栏： CSS CSS3 文章标签： css hover 伪类相册

本文链接：https://blog.csdn.net/weixin_44484452/article/details/86546141

版权

本文介绍了CSS中Hover伪类的一些实用技巧，包括如何解决文本下划线导致的文字偏移问题，实现鼠标移入图片散开的特效，以及创建手风琴式导航框的Hover展开效果。通过具体的代码示例，展示了Hover在网页交互设计中的巧妙应用。

摘要由CSDN通过智能技术生成

一、文本伪类bug解决办法

在文字下面设置鼠标移入出现下划线的时候，通常会发现下划线出现了但文字却有向上移动的现象。这是因为文字与底部之间被有厚度的下划线填充所造成的，“文字与底部的距离+下划线的厚度”文字就会向上移动。
只需要设置同样厚度的上边框就可以抵消对文字的影响，同时上边框需要和背景颜色相同，这样就可以达到隐藏的效果。

.twotop4 span:nth-of-type(1):hover{
 color: #E93C3F;
 border-top: 2px solid #fff;/*与背景颜色相同*/
 border-bottom: 2px solid #E93C3F;
}

二、.鼠标移入图片散开特效

通过定位设置图片层叠在一起，隐藏后面需要展示的图片。
最底下的img标签作为第一张显示图片。
代码样式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hover</title>
<style>
body {
       margin:0px;
       padding:0px;
       background:#797979;
}
.smullBox{
       position: absolute;
       top:45%;
       left:45%;
      float:left;
      width:300px;
      height:200px;
}
.smullBox img {
       position:absolute;
       top:0;
       left:0;
       height:auto;
       width:90px;
       background:#797979;
       padding:5px;
       transition: all 1s;
}
.smullBox:hover img:nth-child(1){
transform: translateY(300px); 
       }
.smullBox:hover img:nth-child(2){
transform: translateY(-300px); 
       }
.smullBox:hover img:nth-child(3){
transform: translateX(-300px); 
       }
.smullBox:hover img:nth-child(4){ 
transform: translateX(300px); 
       }
</style>
</head>