javascript - 如何使用 CSS 使用图像上的按钮弹跳到顶部

Question

我想制作悬停效果以将按钮弹到顶部。所以我将 CSS 与悬停一起使用并为 margin-top 设置动画。发生了什么图像能够弹跳到顶部但按钮无法像图像一样弹跳到顶部。

img.hoverImages {
  margin: 0px;
  padding: 3px;
  outline: 2px solid #DDD;
  border: #a1a1a1;
  float: left;
  -webkit-transition: margin 0.2s ease-out;
  -moz-transition: margin 0.2s ease-out;
  -o-transition: margin 0.2s ease-out;
}
img.hoverImages:hover {
  cursor: pointer;
  margin-top: 5px;
}

<li>

  <div class="cont11">
    <img class="hoverImages" src="../images/wvm.jpg"/  ">
    <!-- <em class="game_wvm "></em>  -->

    <div class="game-name ">金刚狼</div>
    <div class="game-rollover clearfix "><a href="javascript:void(0); " class="real-play ">立刻开始</a>
    </div>
    <p class="game-progressive ">￥<span></span>
    </p>
  </div>
</li>

图像已如下所示弹起，但作为圆圈，该按钮未弹起:

Answer 1

您是在告诉图像进行转换，而不是同时包含图像和圆圈区域(链接)的 div。改为将过渡(和悬停)添加到容器中，在本例中为 .cont11，然后容器内的所有内容都将向上移动。