Я пытаюсь создать кнопку, которая нависает над содержимым моей веб-страницы. Как я могу создать эту функцию?Проблемы с кнопкой Hovering
Это кнопка я работаю с
.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>Вы можете создать полную ширину накладку, которая будет охватывать всю страницу, и сделать вашу центральную кнопку выравнивания внутри него.
.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>Вы можете использовать кнопку, которая парит над содержанием
.button:hover {
background-color: green;
}
и парить на содержание
.btn-holder:hover .button {
background-color: green;
}
Так кнопка парит над содержанием страницы. – troxie
Обратите внимание, что в ближайшее время Google будет разорвать межстраничные объявления (http://searchengineland.com/interstitialgeddon-google-warns-will-crack-intrusive-interstitials-next-january-257252). Я не знаю, квалифицировалось ли то, что вы делаете, но, возможно, стоит потратить время на чтение. – BDawg