Question

我试图创建一个悬停在我网页内容上的按钮。我怎么能创建这个功能？

这是我正在使用

的按钮

＆＃13;

.button {
    background-color: red;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

＆＃13;

<div class="button">Back</div>

＆＃13;

Answer 1

您可以创建覆盖整个页面的全宽覆盖，并使按钮中心对齐。

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

Answer 2

您可以使用悬停在内容上的按钮

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

并将鼠标悬停在内容

上

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

悬停按钮的问题

2 个答案: