如何在悬停到箭头线条时将一个线条效果设置为动画效果?
我尝试使用边框执行此操作,但此箭头和线条必须位于具有透明背景的图像上.
我在这张图片的顶部有一条线,我需要在该图像的底部悬停并使用箭头悬停:
这是我的code:
* {
box-sizing: border-box;
}
.bg {
margin: 0 auto;
background: url('http://i.imgur.com/RECDV24.jpg') center no-repeat;
background-size: cover;
width: 100vh;
height: 100vh;
position: relative;
padding: 1em;
}
.line {
height: 2px;
position: absolute;
top: 50%;
left: 1em;
right: 1em;
background: #fff;
}
.bg:hover .line:after {
height: 10px;
width: 10px;
position: absolute;
content: '';
background: transparent;
border: 2px solid #fff;
border-top-width: 0px;
border-left-width: 0px;
transform: rotate(45deg);
bottom: -6px;
left: calc(50% - 4px);
}