懸停上的圖像頂部的CSS添加按鈕

Question

我是相當新的CSS，我想知道如何將一個按鈕放在對象的頂部，當徘徊。前徘徊，我有這樣的：

input[name=uh]~a:before { 
    display:block; 
    position: absolute; 
    top: 30px; 
    right: 0; 
    color:black; 
    z-index: 1; 
    border: solid 1px #5F99CF; 
    border-right:none; 
    text-align: center; 
    margin-left: -1px; 
    padding: 10px 0; 
    background-image: url(%%Black%%); 
    border-top: none; 
    border-right: none; 
    -moz-border-radius-bottomleft: 7px; 
    border-bottom-left-radius: 7px; 
    -webkit-border-bottom-left-radius: 7px; 
    -webkit-transition: width 1s, height 1s; /* Safari */ 
    transition: width 1s, height 1s; 
    width: 100%; 
    height: 66px; 
} 

當我徘徊，我想在頂部有一個形象（在下面的代碼在「背景圖像屬性），並且點擊時進入一個鏈接不過。 ，我不知道該怎麼辦，我現在有這樣的：。懸停任何幫助將是真棒，謝謝

input[name=uh]~a:hover:before { 
    display:block; 
    position: absolute; 
    top: 30px; 
    right: 0; 
    z-index: 1; 
    border: solid 1px #5F99CF; 
    border-right:none; 
    font-size:15px; 
    line-height:15px; 
    color:#999; 
    text-align: center; 
    margin-left: -1px; 
    padding: 10px 0; 
    border-top: none; 
    border-right: none; 
    background-image: url(%%Battlecats-Menu%%),url(%%subredditrulesbutton%%),url(%%editflairbutton%%),url(%%eventdatabutton%%); 
    background-repeat: no-repeat, no-repeat, no-repeat; 
    background-size: 500px 300px, 500px 60px, 50px 60px ; 
    -moz-border-radius-bottomleft: 7px; 
    border-bottom-left-radius: 7px; 
    -webkit-border-bottom-left-radius: 7px; 
    content: "No more battle cats until you finish your homework!"; 
    background-color: #00ff00; 
    color:white; 
    text-decoration: none!important; 
    width: 500px; 
    height: 280px; 
} 

Answer 1

下面是我爲您創建簡單的CSS代碼我已經添加懸停！到對象和按鈕的父元素

我希望這會幫助你:)

.button{ display: none; } 
 
.object-inner:hover > .button{ display: inline-block; }

<div class="object-inner"> 
 
    <a href="" class="button">Click</a> 
 
    <div class="object"> 
 
    I'm an object! 
 
    </div> 
 
</div>