伪选择器.classname：not（：hover）{}不将样式应用于以前的元素

Question

我会尽量让这个变得容易理解。

目标： 所有不悬停的.hover-section都会有0.5的不透明度。

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

非常感谢任何帮助。提前谢谢！

Codepen：

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

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

Answer 1

z-index上的.background涵盖了之前的所有元素。使用否定z-index代替将该元素推送到父级后面，并显示上一个同级.hover-section中的内容。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;