2016-08-31 138 views
0

我試圖創建一個按鈕,懸停在我的網頁的內容。 我該如何創建這個功能?懸停按鈕問題

這是我與

.button { 
 
    background-color: red; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
}
<div class="button">Back</div>

+0

使按鍵上方浮動的頁面內容。 – troxie

+0

請注意,[Google正在嚴厲打擊插頁式廣告](近期內將嚴厲打擊)(http://searchengineland.com/interstitialgeddon-google-warns-will-crack-intrusive-interstitials-next-january-257252)。我不知道你所做的是否合格,但可能值得你花時間閱讀。 – BDawg

回答

2

您可以創建一個全寬覆蓋,將覆蓋整個頁面,使您的按鈕中心內部將其調整工作的按鈕。

.btn-holder { 
 
    background: rgba(255, 255, 255, 0.5); 
 
    position: fixed; 
 
    z-index: 10; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.button { 
 
    transform: translate(-50%, -50%); 
 
    background-color: red; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
    position: absolute; 
 
    cursor: pointer; 
 
    left: 50%; 
 
    top: 50%; 
 
}
<p>Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet</p> 
 
<p>Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet</p> 
 
<p>Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet</p> 
 
<p>Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet Lorem ipsum dolor site amet</p> 
 
<div class="btn-holder"> 
 
    <div class="button">Back</div> 
 
</div>

+0

謝謝你,這是我需要的。 – troxie

+0

@troxie歡迎您) –

+0

@troxie歡迎來到StackOverflow!如果這回答你的問題,請不要忘記標記它正確! – BDawg

0

您可以使用的按鈕,將鼠標懸停在內容

.button:hover { 
    background-color: green; 
} 

,並懸停在內容

.btn-holder:hover .button { 
    background-color: green; 
}