如何用动画图标悬停文本

Question

我真的需要一些帮助。我在悬停上一个按钮时遇到困难。我希望此按钮与动画图标一起滚动。但是现在，它只滚动动画图标，而不是文本。下面是按钮、HTML和CSS代码的屏幕截图。非常感谢。

按钮状态现在https://vimeo.com/394493039

.link2 {
color: #000;
cursor: pointer;
font-weight: 400;
text-decoration: none;
}
.link--arrowed2 {
color: #000;
display: inline-block;
height: 2rem;
line-height: 2rem;
}
.link--arrowed2 .arrow-icon2 {
position: relative;
top: -1px;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
vertical-align: middle;
}
.link--arrowed2 .arrow-icon--circle2 {
color: #000;  
-webkit-transition: stroke-dashoffset 0.3s ease;
transition: stroke-dashoffset 0.3s ease;
stroke-dasharray: 95;
stroke-dashoffset: 95;
}
.link--arrowed2:hover .arrow-icon2 {
color: #000;
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
.link--arrowed2:hover .arrow-icon--circle2 {
color: #000;
stroke-dashoffset: 0;
}

<div grid-row="" grid-pad="1.5" grid-gutter="3" class=""><div grid-col="x11" grid-pad="1.5"><small>
<a class="link link--arrowed2" href="#" rel="prev_page">
<svg class="arrow-icon2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" stroke="#000000" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
<circle class="arrow-icon--circle2" cx="16" cy="16" r="15.12"></circle>
<path class="arrow-icon--arrow2" d="M18.00 23.00L10.0 16l7.00 -7.00M9.23 16h13.98"></path>
</g>
</svg></a><a href="#" rel="prev_page"></a><a class="link link--arrowed2" href="#" rel="prev_page"> Prev Project</a></small></div>

Answer 1

您在html中使用了太多的a标记。每个链接只需要一个锚点标记。

结果是，当你将鼠标悬停在链接的任何部分时，你的效果都会应用。

.link2 {
color: #000;
cursor: pointer;
font-weight: 400;
text-decoration: none;
}
.link--arrowed2 {
color: #000;
display: inline-block;
height: 2rem;
line-height: 2rem;
}
.link--arrowed2 .arrow-icon2 {
position: relative;
top: -1px;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
vertical-align: middle;
}
.link--arrowed2 .arrow-icon--circle2 {
color: #000;
-webkit-transition: stroke-dashoffset 0.3s ease;
transition: stroke-dashoffset 0.3s ease;
stroke-dasharray: 95;
stroke-dashoffset: 95;
}
.link--arrowed2:hover .arrow-icon2 {
color: #000;
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
.link--arrowed2:hover .arrow-icon--circle2 {
color: #000;
stroke-dashoffset: 0;
}

<div grid-row="" grid-pad="1.5" grid-gutter="3" class="">
<div grid-col="x11" grid-pad="1.5">
<small>
<a class="link link--arrowed2" href="#" rel="prev_page">
<svg class="arrow-icon2" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<g fill="none" stroke="#000000" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
<circle class="arrow-icon--circle2" cx="16" cy="16" r="15.12"></circle>
<path class="arrow-icon--arrow2" d="M18.00 23.00L10.0 16l7.00 -7.00M9.23 16h13.98"></path>
</g>
</svg>
<span>Prev Project</span>
</a>
</small>
</div>
</div>