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