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