需要帮助在鼠标悬停事件上在 div 上添加带箭头的标题

Question

关于悬停效果，请查看网站http://www.rokivo.com/

我希望 mysite 中的标题、按钮和 div 包含这样的效果。

提前致谢

<div class="col-xs-12"> <a href="enquiry.html"><h3 class="orange2 pull-right contact-head">ENQUIRY<br/><i class="fa fa-arrow-right black arrow4 pull-left"></i></h3></a> </div>

我使用 jquery 在 mouseenter 上添加 css 转换类并在 mouseleave 上删除该类，但它看起来很奇怪。我希望在上面的推荐网址中具有类似的效果。

Answer 1

听起来您不想让箭头无限滑动，所以我删除了infinite，还添加了更长的箭头（fa-long-arrow-right），因为您在 cmets 中提到了“长箭头”。

我还添加了forwards，因此箭头将停留在动画的结束位置，而不是回到开始位置。这是animation-fill-mode

.contact-head{
	font-size:17px !important;
	padding:15px !important;
	border:2px solid #555 !important;
	border-bottom:5px solid #ffc000 !important;
	min-width:270px;
	max-width:270px;
}


@-webkit-keyframes arrow-jump3 {
  0%   { opacity: 0;
  -webkit-transform: translateX(25px);
        -moz-transform: translateX(25px);
        -0-transform: translateX(25px);
        transform: translateX(25px);
  }
  100% { opacity: 1;  
        -webkit-transform: translateX(160px);
        -moz-transform: translateX(160px);
        -0-transform: translateX(160px);
        transform: translateX(160px);
    } 
}
.arrow4 {
  -webkit-animation: arrow-jump3 1s forwards; /* Safari 4+ */
  -moz-animation:    arrow-jump3 1s forwards; /* Fx 5+ */
  -o-animation:      arrow-jump3 1s forwards; /* Opera 12+ */
  animation:         arrow-jump3 1s forwards; /* IE 10+, Fx 29+ */
 
}
.contact-head i{
	 display:none;
}
.contact-head:hover > i{
margin-top:10px;	
display:block;
}	
.contact-head:hover{
	background:#ffc000 !important;
	color:#000 !important;
	border-bottom:2px solid #555 !important;
}

.contact h3{
	margin:20px 0px 20px 0px;
	font-size:19px;
}
a{
  text-decoration:none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-xs-12">	<a href="enquiry.html"><h3 class="orange2 pull-right contact-head">ENQUIRY<br/><i class="fa fa-long-arrow-right black arrow4 pull-left"></i></h3></a> </div>
	<div class="col-xs-12">	<a href="servicecall.html"><h3 class="orange2 pull-right contact-head">REGISTER SERVICE CALL<br/><i class="fa fa-long-arrow-right black arrow4 pull-left"></i></h3></a> </div>
	<div class="col-xs-12">	<a href="feedback.html"><h3 class="orange2 pull-right contact-head">CUSTOMER FEEDBACK<br/><i class="fa fa-long-arrow-right black arrow4 pull-left"></i></h3></a> </div>

codepen

希望这会有所帮助。祝你好运。

PS。您的 codepen（箭头）无法正常工作，因为您没有包含字体真棒 css。您必须点击齿轮图标并在其中包含您的外部组件。

---

由于您要求我查看该网站，因此我尝试按照我看到的方式进行操作。您可能需要稍微调整一下以满足您的需求，但在大多数情况下，它应该让您了解如何实现您的目标。我觉得没有必要使用keyframes，所以我在悬停时使用了简单的过渡。当您将鼠标悬停在父级上时，您还可以定位一个子级并让该子级过渡。希望你能理解。

*,
*:after,
*:before{
  box-sizing:border-box;
}

.box{
  position: relative;
  width: 200px;
  height: 300px;
  background: #eee;
  border-bottom: 5px solid #45ca58;
  transition: all .5s ease;
  margin: 0 auto; 
  overflow: hidden;
}
.border{
  width: 100%;
  height: 40px;
  display: inline-block;
  background: #45ca58;
  position: absolute;
  bottom: -40px;
  transition: all .5s ease;
}
/*on hover target the border element so that should move*/
.box:hover > .border{
  position: absolute;
  bottom: 0px;
}
.arrow{
  position: absolute;
  bottom: 10px;
  left:-20px;
  color:white;
  transition: all .5s ease-in-out;
}
.box:hover > .arrow{
  left: 30px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class = "box">
  <span class = "border"></span>
  <span class="arrow"><i class="fa fa-long-arrow-right"></i></span>
</div>