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中。任何帮助将不胜感激。

谢谢

Answer 1

您可以使用@keyframes仅使用CSS进行此操作。请注意，虽然动画只会在用户:hover播放时播放，所以如果元素从用户光标下方移出，动画将停止。

在本示例中，我已经通过将填充从元素的一侧移到另一侧来解决了这个问题。

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>

鼠标悬停时弹跳文本

1 个答案: