css - 伪选择器.classname :not(:hover) {} not applying styles to previous elements

Question

我会尽量使它易于理解。

目标:所有未悬停的 .hover-section 的不透明度均为 0.5。

目前:悬停的 .hover-section 之后的所有 .hover-section 元素的不透明度为:0.5，但之前的 .hover-section 的不透明度为 0。我想我有两个应用不透明度的类，但似乎找不到它或者我的结构不正确。

非常感谢对此的任何帮助。提前致谢!

代码笔:

.container:hover .hover-section:not(:hover) {
    opacity: 0.5;
  }

https://codepen.io/garynorris88/pen/EXPavg?editors=1100

Answer 1

.background 上的 z-index 覆盖了前面所有的元素。使用负数 z-index 将该元素推到父级后面，并且将显示前一个同级 .hover-section 中的内容。

.body {
  height: 300px;
}

.container {
  background-color: #111;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: sans-serif;
  height: 100vh;
  width: 100vw;
  position: relative;
  z-index: 0;
}

#alpha .background {
  background-image: url("https://unsplash.it/1000/1000");
}
#alpha:hover .background {
  opacity: 1;
}

#bravo .background {
  background-image: url("https://unsplash.it/1000/1000");
}
#bravo:hover .background {
  opacity: 1;
}

#charlie .background {
  background-image: url("https://unsplash.it/1000x1000");
}
#charlie:hover .background {
  opacity: 1;
}

#delta .background {
  background-image: url("https://unsplash.it/g/1000/1008");
}
#delta:hover .background {
  opacity: 1;
}

.background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: -1;
}

.hover-section {
  color: #000;
  display: block;
  float: left;
  height: 100vh;
  margin: 0 !important;
  transition: opacity ease-in-out 0.3s;
  width: 25%;
}
.hover-section h1 {
  z-index: 2;
}

.content {
  align-items: center;
  color: #fff;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}
.content:before {
  background-color: #333;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.5s ease-in-out;
}
.content:hover:before {
  opacity: 0.5;
}

.container:hover .hover-section:not(:hover) .content {
  opacity: 0.5;
}

<div class="container">
  <div class="hover-section" id="alpha">
      <div class='background'></div>
      <div class='content'>
        <h1>Title</h1>
    </div >
  </div>
  <div class="hover-section" id="bravo">
      <div class='background'></div>
      <div class='content'>
        <h1>Title</h1>
    </div >
  </div>
  <div class="hover-section" id="charlie">
      <div class='background'></div>
      <div class='content'>
        <h1>Title</h1>
    </div >
  </div>
  <div class="hover-section" id="delta">
      <div class='background'></div>
      <div class='content'>
        <h1>Title</h1>
    </div >
  </div>
</div>