Question

我正在尝试设计一个简单的悬停滑块，如果将鼠标悬停在其上，则下拉菜单应向下滑动，并且悬停按钮背景色的移动也应更改。

在设计此按钮时，我创建了一个普通按钮，现在当我试图将其悬停在其上时，它不会更改其颜色。我将滑块按钮和滑块内容包装在滑块类中，按钮具有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>

在CSS中设计悬停滑块下拉菜单

1 个答案: