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

Question

Regarding the hover effect, pelase check the site http://www.rokivo.com/

i want such a effect to be include for headings,buttons and div in mysite.

thanks in advance

<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>

i used jquery to add css transition class on mouseenter and remove that class on mouseleave but it looks odd. i want similar effect in the referral url above.

Answer 1

It sounds like you didn't want to have the arrow sliding infinitely so I removed infinite also I added the longer arrow ( fa-long-arrow-right ) since you mentioned the "long arrow" in the comments.

I also added forwards so the arrow will stay at the end position of the animation and not go back to the beginning. This is the 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

Hope this helps. Good luck.

PS. Your codepen (arrow) wasn't working because you didn't include the font awesome css. You got to click on the cog icon and include your externals there.

---

Since you asked for me to look at the website I tried to do it the way I saw it. You might have to tweek it a little bit for your needs but for the most part it should give you an idea of how to accomplish your goal. I didn't feel that there was a need to use keyframes so I used simple transitions on hover. when you hover over a parent you can also target a child and have that child transition. Hope you understand.

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