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

Question

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

我希望我的网站中的标题、按钮和 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 transition 类并在 mouseleave 上删除该类，但它看起来很奇怪。我想在上面的推荐网址中产生类似的效果。

Answer 1

听起来你不想让箭头无限滑动所以我删除了 infinite 我还添加了更长的箭头 (fa-long-arrow-right)因为你在评论中提到了“长箭头”。

我还添加了 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

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

附言。你的 codepen(箭头)没有工作，因为你没有包含 font awesome css。您必须单击齿轮图标并在此处包含您的外部组件。

---

既然你要我看网站，我就试着按照我看到的方式去做。您可能需要根据自己的需要对它进行一些调整，但在大多数情况下，它应该让您了解如何实现您的目标。我觉得没有必要使用关键帧，所以我在悬停时使用了简单的过渡。当您将鼠标悬停在 parent 身上时，您还可以定位一个 child 并让该 child 过渡。希望你明白。

*,
*: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>