鼠标悬停时弹跳文本

Question

我有一个图像，我想让覆盖的文本在鼠标悬停时移动（我也尝试过悬停但没有更好的结果）并且文本想要在鼠标悬停时反弹。

CSS

.backgroundImage {
  /*opacity: .7;*/
  display: block;
  width: 100%;
  height: auto;
}

HTML

section style="float: left;">
    <img src="_images/engaged-buying-a-home.jpg" alt="Avatar" 
    class="backgroundImage" style="width:82%; ">
</section>

<section id="textbox" style="clear: both; float: left; width: 48%; height: 
    18em; 
       margin-top: -18em; z-index: 10;">
       <p style="font-size: 2.0em; margin-top: 6.5em; margin-left: 4.5em; 
          color: #FFF; z-index: 10;" >Seller Services</p>
       <a href="sellers.html"><p id="learn" style="font-size: 1.5em; margin-top: 
      -1em; margin-left: 6.0em; border: 1px solid #FFF; color: #000; padding: 
.5em 1em; width: 8em; display: none;">Read More &nbsp;&nbsp;&nbsp;&nbsp;&#8594; 
   </p></a>
</section>

jQuery:

<script>
    $(document).ready(function(){
    $("#textbox").mouseenter(function(){
        $(this).animate({marginTop: "-=200px"},2000)
    });
});
</script>

<script>
$(document).ready(function(){
    $("#textbox").mouseenter(function(){
        $("#learn").show(200)
});
});
</script>

<script>
$(document).ready(function(){
    $("#textbox").mouseleave(function(){
    $(this).animate({marginTop: "+=200px"},2000)
});
});
</script>

<script>
$(document).ready(function(){
    $("#textbox").mouseleave(function(){
        $("#learn").hide(200)
});
});
</script>

顺便说一句，我计划在 CSS 工作后将样式放入 CSS 中。任何帮助将不胜感激。

谢谢

Answer 1

您可以使用 @keyframes 仅使用 CSS 来完成此操作。请注意，动画只会在用户:hovering 时播放，因此如果元素从用户光标下方移出，动画将停止。

我在这个例子中通过将填充从元素的一侧移动到另一侧来解决这个问题。

div
{
  padding-top: 100px;
  padding-bottom: 0;
}

div:hover
{
  animation: bounce linear infinite 1s;
}

@keyframes bounce
{
  0%{
    padding-top: 100px;
    padding-bottom: 0;
  }
  
  50%{
    padding-top: 0;
    padding-bottom: 100px;
  }
  
  100%{
    padding-top: 100px;
    padding-bottom: 0;
  }
}

<div>Hover me</div>