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

Question

我想制作悬停效果将按钮弹到顶部。 所以我使用带有悬停和动画边缘顶部的 CSS。 发生了什么图像能够弹到顶部但按钮无法像图像一样弹到顶部。

 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 然后容器内的所有内容都会向上移动。

Answer 2

用它改变你的风格它应该可以工作

.cont11 {
  margin: 100px;
  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;
}
.cont11:hover {
  cursor: pointer;
  margin-top: 5px;
}