鼠标移入背景滑动特效

会飞的鱼

2022-05-04

2787

Css

<div class="turning">
    <div class="turning_le">
         <a href="">
              <span>< Previous</span>
         </a>
    </div>
    <div class="turning_ri">
         <a href="">
              <span>Next ></span>
         </a>
    </div>
</div>

.turning{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.turning .turning_le{
width: 120px;
height: 44px;
text-align: center;
line-height: 44px;
margin-top: 35px;
border: 1px solid #9fa0a0;
}
.turning a {
display: block;
width: 100%;
height: 100%;
font-size: 16px;
color: #898989;
position: relative;

}
.turning span{
z-index: 20;
position: relative;
}
.turning a:hover span{
color: #fff;
}
.turning a:before{
position: absolute;
content: '';
width: 0;
height: 100%;
left: 0px;
background-color: red;
z-index: 9;
transition: all 0.5s;
}
.turning a:hover:before{
width: 100%;
}
.turning .turning_ri{
width: 120px;
height: 44px;
text-align: center;
line-height: 44px;
margin-top: 35px;
border: 1px solid #9fa0a0;
}

无

下一页：视频和显示图片充满父元素