需要帮助在鼠标悬停事件上添加带箭头的标题 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 class 并在 mouseleave 上删除 class 但它看起来很奇怪。我希望在上面的推荐 url 中有类似的效果。

Answer 1

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

我还添加了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（箭头）没有工作，因为你没有包含 awesome 字体 css。您必须单击齿轮图标并在此处包含您的外部设备。

既然你让我看网站，我就试着按照我看到的方式去做。您可能需要根据自己的需要对它进行一些调整，但在大多数情况下，它应该让您了解如何实现您的目标。我觉得没有必要使用 keyframes 所以我在悬停时使用了简单的过渡。当您将鼠标悬停在 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>

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

Need help adding caption with arrow over a div on mouseover event

html

css

jquery

user-interface

hover