html - 在CSS中设计悬停 slider 下拉菜单

Question

我正在尝试设计一个简单的悬停 slider ，如果我悬停在它上面，下拉菜单应该向下滑动，并且我悬停的移动按钮的背景颜色也应该改变。

在设计这个时，我创建了一个普通按钮，现在当我试图悬停在它上面时，它给了它一些颜色，它没有改变它的颜色。我把我的 slider 按钮和 slider 内容包装在 slider 类中，按钮有 slidercontact 和 slider 类内容在 slidercontent 类中(以下代码中未显示)。

我预计颜色会改变，但没有改变颜色。

.media {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background {
  z-index: 1;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(43, 74, 111, 0.2);
}

.contents {
  display: flex;
  justify-content: center;
  z-index: 2;
  font-style: italic;
  font-weight: bold;
  color: rgb(27, 5, 58);
  border: solid 10px rgba(3, 35, 54, 0.6);
  padding: -3%;
}

.slidercontact {
  width: 80px;
  font-style: italic;
  font-size: 1.1em;
  color: rgb(7, 18, 58);
  background-color: rgba(122, 134, 173, 0.5);
  border: 3px solid rgb(6, 21, 57);
}

.slider {
  display: flex;
  margin-right: 1.9%;
  margin-top: -5%;
  margin-bottom: 1%;
  flex-direction: column;
  align-items: flex-end;
}

.slider:hover .slidercontact {
  background-color: rgb(277, 0, 0);
}

<div class="media">
  <video src="video.mov" autoplay loop muted></video>`
</div>
<div class="background"></div>
<div class="contents">
  <h1>Registration Page</h1>
</div>
<div class="slider">
  <button class="slidercontact">EmailID</button>
</div>

Answer 1

您的 .background 有一个 z-index: 1，有效地覆盖页面并捕获所有鼠标事件，包括 hover。要让 pointer-events 通过它，给它一个

pointer-events: none;

看到它工作:

.media {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background {
  pointer-events: none;               /* <=== here */
  z-index: 1;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(43, 74, 111, 0.2);
}

.contents {
  display: flex;
  justify-content: center;
  z-index: 2;
  font-style: italic;
  font-weight: bold;
  color: rgb(27, 5, 58);
  border: solid 10px rgba(3, 35, 54, 0.6);
  padding: -3%;
}

.slidercontact {
  width: 80px;
  font-style: italic;
  font-size: 1.1em;
  color: rgb(7, 18, 58);
  background-color: rgba(122, 134, 173, 0.5);
  border: 3px solid rgb(6, 21, 57);
}

.slider {
  display: flex;
  margin-right: 1.9%;
  margin-top: -5%;
  margin-bottom: 1%;
  flex-direction: column;
  align-items: flex-end;
}

.slider:hover .slidercontact {
  background-color: rgb(277, 0, 0);
}

<div class="media">
  <video src="video.mov" autoplay loop muted></video>`
</div>
<div class="background"></div>
<div class="contents">
  <h1>Registration Page</h1>
</div>
<div class="slider">
  <button class="slidercontact">EmailID</button>
</div>