Html 使用动画悬停时显示div

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

如果用户将鼠标悬停在整个div上，我想做的是，两个

span

都应该有幻灯片动画但是现在卷轴来了，只有一个

span

文本（需要帮助）出来了，而不是

？

标记出来了

。需要帮助吗{
背景色：#042E49；
颜色：#ffffff；
填充：0px 10px；
右：0；
最高：40%；
字体大小：粗体；
字体大小：20px；
位置：绝对位置；
过渡：所有0.4缓进缓出；
-webkit过渡：所有.8s易用性；
-moz过渡：全部.8秒轻松；
-ms过渡：全部.8秒轻松；
-o型过渡：所有。8秒缓解；
过渡：全部。8秒轻松；
}
.需要帮助吗{
背景色：#06507D；
颜色：#ffffff；
右图：-150px；
最高：40%；
位置：绝对位置；
填充物：5px10px；
显示：内联块；
溢出：隐藏；
过渡：所有0.4缓进缓出；
-webkit过渡：所有.8s易用性；
-moz过渡：全部.8秒轻松；
-ms过渡：全部.8秒轻松；
-o型过渡：所有。8秒缓解；
过渡：全部。8秒轻松；
}
.需要帮助全部：悬停。需要帮助{
右：0；
}

?
需要帮忙吗

$（“.need-help-qu”）.hover（函数（）{
$（“.needhelp”）.animate（{right:'12px'}）；
}); 
正文{
溢出x：隐藏；
}
.需要帮助吗{
背景色：#042E49；
颜色：#ffffff；
填充：0px 10px；
右：0；
最高：40%；
字体大小：粗体；
字体大小：20px；
位置：绝对位置；
过渡：所有0.4缓进缓出；
-webkit过渡：所有.8s易用性；
-moz过渡：全部.8秒轻松；
-ms过渡：全部.8秒轻松；
-o型过渡：所有。8秒缓解；
过渡：全部。8秒轻松；
}
.需要帮助吗{
背景色：#06507D；
颜色：#ffffff；
右图：-150px；
最高：40%；
位置：绝对位置；
填充物：5px10px；
显示：内联块；
溢出：隐藏；
过渡：所有0.4缓进缓出；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-ms转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
.需要帮助全部：悬停。需要帮助{
右：40px；
}

?
需要帮忙吗
您可以按照以下方法进行操作。使父组件
溢出：隐藏
。然后将
needhelp full
left/right悬停，并将绝对位置赋予
needhelp full
div


。需要帮助吗{
背景色：#042e49；
颜色：#ffffff；
显示：内联块；
字体大小：20px；
字体大小：粗体；
填充：3x10px；
垂直对齐：顶部；
}
.需要帮助吗{
背景色：#06507d；
颜色：#ffffff；
显示：内联块；
溢出：隐藏；
填充物：5px10px；
右图：-150px；
}
.需要帮助吗{
高度：50px；
溢出：隐藏；
填充物：5px10px；
位置：绝对位置；
右：-135px；
最高：40%；
-webkit过渡：所有.8s易用性；
-moz过渡：全部.8秒轻松；
-ms过渡：全部.8秒轻松；
-o型过渡：所有。8秒缓解；
过渡：全部。8秒轻松；
}
.需要全部帮助：悬停{
右：0；
}
身体{
溢出：隐藏；
}

?
需要帮忙吗
签出

您试图移动单个div，因此这很棘手，只需将
的全部内容组合在一起即可。需要帮助将整个
div组合在一起，并将其作为一个整体移动

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


?
需要帮忙吗
.需要帮助吗{
背景色：#042E49；颜色：#ffffff；填充：3px 10px 2px；
字体大小：粗体；字体大小：20px；浮动：左侧；
}
.需要帮助吗{
浮动：左；背景色：#06507D；颜色：#ffffff；
填充：5px10px；溢出：隐藏；
}
.需要帮助吗{
右图：-123px；位置：固定；过渡：所有0.4s易入易出；
-webkit转换：all.8s易用；-moz转换：all.8s易用；
-ms转换：全部.8s易用；-o转换：全部.8s易用；
过渡：全部。8秒轻松；
}
.需要完整帮助：悬停{right:0；}

此外，我还看到您正在尝试完成此滑入框，因此主要是使用
position:fixed且不使用
绝对值
。因为它通常“固定”到页面，而不是某个容器元素
 这是因为您没有更改
的位置。悬停期间需要帮助。另外，为什么不定位容器并将其更改为悬停状态，而不是单独定位元素呢？能否如您所说，编辑我的代码以获得更好的输出？我们如何更改两个span的位置hover@David：你能接受吗？@HarigovindR坏孩子。CSS动画，特别是像这样简单的动画，应该受到鼓励。谢谢，但那个“？”也应该移到左边。“？”就在“需要帮助”文本的前面。如果你也需要这个问号来移动，那么我建议你使用jQuery，这样它就能提供你所需要的准确输出。你的意思是“？”标记也随着帮助文本从右向左移动？@HarigovindR:不应该真的为所有内容推荐jQuery。这不需要jQuery。@Harry我发现jQuery真的很有用，所以我试着推荐jQuery来实现这样的效果和UI攻击。我知道参考外部图书馆不是一个好的做法。但仍然如此。而且它只是一个建议，建议可以被接受也可以被拒绝。