悬停按钮的问题

Issues with Hovering Button

本文关键字：问题 按钮 悬停      更新时间：2023-09-26

我试图创建一个按钮，悬停在我的网页的内容。我如何创建这个函数?

这是我正在使用的按钮

.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;
}
相关文章：