如何使用CSS彈出按鈕圖像上的按鈕

我想製作懸停效果以將按鈕彈回頂部。所以我使用懸停和動畫邊界頂部的CSS。發生了什麼事情，圖像能夠反彈到頂部，但按鈕無法像圖像一樣反彈到頂部。如何使用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已經向上反彈如下而是循環，按鈕不彈起：

來源

2016-09-15 Morgan Ng

你''有一個額外的引號標記。 – Chris

按鈕你的意思是''標記對嗎？ –

@Chris你好，我需要反彈遊戲名稱的div類 –

你告訴形象，不轉型既包含圖像div和圓圈區域（鏈接）。將transition（和hover）添加到容器中，在這種情況下，將是.cont11，那麼容器內的所有內容都將向上移動。

來源

2016-09-15 08:15:52 mthomp

嗨，讓我看看如何做到這一點？即時通訊新的。謝謝你 –

你好像這樣的https://jsfiddle.net/vL3hu7sL/它看起來有點沒有圖像，但CSS正在做你所需要的。您需要將轉換移至.cont11 css，然後將所需的任何保證金添加到懸停。 – mthomp

嗨，正是我想要的，但我需要的圓圈移動到右側不移動鼠標移開後下來。我可以知道如何去做 –

改變你的風格與此它應該工作

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

來源

2016-09-15 08:28:22 Suraj

如何使用CSS彈出按鈕圖像上的按鈕

回答

相關問題