Question

关于悬停效果，pelase检查网站https://docs.python.org/2/using/windows.html#executing-scripts

我希望在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），因为你提到了＆＃34;长箭头＆＃34;在评论中。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

codepen

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

PS。您的codepen（箭头）不起作用，因为您没有包含字体真棒css。你必须点击cog图标并在那里包含你的外部。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: