如何使用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>

IMAGES已经向上反弹如下而是循环，按钮不弹起：

Answer 1

你告诉形象，不转型既包含图像div和圆圈区域（链接）。将transition（和hover）添加到容器中，在这种情况下，将是.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; 
}