Hover伪类实用特效

一、文本伪类bug解决办法

1. 在文字下面设置鼠标移入出现下划线的时候，通常会发现下划线出现了但文字却有向上移动的现象。这是因为文字与底部之间被有厚度的下划线填充所造成的，“文字与底部的距离+下划线的厚度”文字就会向上移动。
   

2. 只需要设置同样厚度的上边框就可以抵消对文字的影响，同时上边框需要和背景颜色相同，这样就可以达到隐藏的效果。

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

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

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

收起效果

Hover展开效果

3. 更换hover样式显示图片层叠效果

.sim-anim{
       position: relative;
       }      
.sim-anim img{
       position: absolute;
       transition: all 0.5s;
       }
.sim-anim:hover img{
       z-index: 1;
       }
.sim-anim:hover img:nth-child(1){
transform: translate(-80%,-160%) rotate(-80deg) scale(0.3,0.3);
       }      
.sim-anim:hover img:nth-child(2){   
transform: translate(-70%,-140%) rotate(-70deg) scale(0.4,0.4);
       }             
.sim-anim:hover img:nth-child(3){   
transform: translate(-60%,-120%) rotate(-60deg)  scale(0.5,0.5); 
       }      
.sim-anim:hover img:nth-child(4){    
transform: translate(-50%,-100%) rotate(-50deg)  scale(0.6,0.6); 
       }                    
.sim-anim:hover img:nth-child(5){   
transform: translate(-40%,-80%) rotate(-40deg) scale(0.7,0.7); 
       }
.sim-anim:hover img:nth-child(6){   
transform: translate(-30%,-60%) rotate(-30deg) scale(0.8,0.8); 
       }      
.sim-anim:hover img:nth-child(7){   
transform: translate(-20%,-40%) rotate(-20deg) scale(0.9,0.9); 
       }             
.sim-anim:hover img:nth-child(8){   
transform: translate(-10%,-20%) rotate(-10deg);
       }
.sim-anim:hover img:nth-child(9){   
transform: scale(1.1,1.1) ;
       }

实现的效果

三、鼠标移入手风琴式显示导航框效果

1. 样式设置完成后，将元素向左移动隐藏需要的部分transform:translateX(110px);，用hover给标签恢复显示transform:translateX(0px);。
2. 随后给每一个标签都设置延迟时间，错开延迟时间就可以达到想要的效果。
   实现效果：
   
   代码样式

         
         

                  广书签切换
                  州幻灯片
                  网图片滚动-GG
                  上图片滚动-CC
                  订图片无缝滚动G
                  餐图片无缝滚动C
                  系图片滚动-GG
                  统图片滚动-CC
                  导图片滚动-UU
                  航图片滚动-NN
                  11常用导航【V2.1】
                  12手风琴【V2.2】
                  T1其他基础效果
                  主主题网