Question

我有右侧固定位置div。我希望在悬停时用动画显示它。

如果用户将鼠标悬停在整个div上，我想要做的就是span两者都应该出现幻灯片动画。但是现在滚动即将到来，只有一个span文本（需要帮助）出来而不是?标记出来。

.need-help-qu{
	background-color:#042E49;
	color:#ffffff;
	padding:0px 10px;
	right:0;
	top:40%;
	font-weight: bold;
	font-size: 20px;
	position:absolute;
	transition: all 0.4s ease-in-out;
	-webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
.need-help{
	background-color:#06507D;
	color:#ffffff;
	right:-150px;
	top:40%;
	position:absolute;
	padding:5px 10px;
	display: inline-block;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	-webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
.need-help-full:hover .need-help {
	right:0;
	
}

<div class="need-help-full">
	<span class="need-help-qu">?</span>
	<span class="need-help text-sm">NEED A HELP</span>
</div>

Answer 1

$(".need-help-qu").hover(function(){
    $(".need-help-qu").animate({right: '12px'});
});

body{
  overflow-x:hidden;
  }
.need-help-qu{
	background-color:#042E49;
	color:#ffffff;
	padding:0px 10px;
	right:0;
	top:40%;
	font-weight: bold;
	font-size: 20px;
	position:absolute;
	transition: all 0.4s ease-in-out;
	-webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
.need-help{
	background-color:#06507D;
	color:#ffffff;
	right:-150px;
	top:40%;
	position:absolute;
	padding:5px 10px;
	display: inline-block;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  
}
.need-help-full:hover .need-help {
	right:40px;
	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="need-help-full">
	<span class="need-help-qu">?</span>
	<span class="need-help text-sm">NEED A HELP</span>
</div>

Answer 2

您可以采取以下方式。制作父组件need-help-full。并在悬停时向左/向右移动need-help-full，并为.need-help-qu { background-color: #042e49; color: #ffffff; display: inline-block; font-size: 20px; font-weight: bold; padding: 3px 10px; vertical-align: top; } .need-help { background-color: #06507d; color: #ffffff; display: inline-block; overflow: hidden; padding: 5px 10px; right: -150px; } .need-help-full { height: 50px; overflow: hidden; padding: 5px 10px; position: absolute; right: -135px; top: 40%; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -ms-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease; } .need-help-full:hover { right:0; } body { overflow: hidden; } div提供绝对位置。

＆＃13;

<div class="need-help-full">
	<span class="need-help-qu">?</span>
	<span class="need-help text-sm">NEED A HELP</span>
</div>

＆＃13;

<application

android:theme="@style/CustomActionBarTheme" >

 </application>

＆＃13;

希望它有所帮助。

Answer 3

检查 this 。

你试图移动单个div，所以它证明是棘手的，只是将proc transpose data=have out=want(rename=(_name_=ClassID col1=All)) ; by id ; var T U ; run; proc sort; by classid id; run; div的整个内容捆绑在一起并将其作为一个整体移动。

.need-help-full

此外，我发现您正在尝试在框中完成此幻灯片，因此主要是使用<div class="need-help-full"> <span class="need-help-qu">?</span> <span class="need-help text-sm">NEED A HELP</span> </div> <style> .need-help-qu{ background-color:#042E49; color:#ffffff; padding:3px 10px 2px; font-weight: bold;font-size: 20px;float:left; } .need-help{ float:left; background-color:#06507D; color:#ffffff; padding:5px 10px;overflow: hidden; } .need-help-full{ right:-123px; position:fixed; transition: all 0.4s ease-in-out; -webkit-transition: all .8s ease;-moz-transition: all .8s ease; -ms-transition: all .8s ease;-o-transition: all .8s ease; transition: all .8s ease; } .need-help-full:hover{right:0;} </style>并且不使用position:fixed;。因为它通常“固定”到页面而不是某些容器元素。

悬停时显示div与动画

3 个答案: