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

Question

I want to make a hover effect to bounce an button to top. So i'm using CSS with hover and animating the margin-top. what happends that the image able to bounce to top but the button unable to bounce to top like images.

 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 HAS BEEN BOUNCE UP AS BELOW but as circle that button not bounce up :

Answer 1

You are telling the image to transition not the div containing both the image and the circled area (the link). Add the transition (and hover) to the container instead, in this case that would be .cont11 then everything inside the container will move up.

Answer 2

change your style with this it should work

.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;
}