当所有元素都使用相同的 class 时，如何使当前 :hover 元素位于顶部

Question

我正在尝试使用纯 CSS 和 HTML 创建一个简单的书架。但是，我正在努力 使当前鼠标悬停的书具有最高 z-index。

没有 JS 这可能吗？也许巧妙地使用 CSS 选择器？

HTML

<div class="bookshelf">
  <div class="book">
    <div class="side spine">
      1
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 1
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      2
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 2
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      3
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 3
    </div>
  </div>
</div>

CSS

.bookshelf {
  width: 100%;
  /* height: 800px; */
  margin-top: 32px;
  border: 1px solid #CCC;
  display: flex;
}

.book {
  width: 50px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

.side {
  position: absolute;
  border: 2px solid black;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

.spine {
  width: 50px;
  height: 280px;
  line-height: 200px;
  background-color: yellow;
  transform: rotateY(0deg) translateZ(0px);
}

.top {
  width: 50px;
  height: 190px;
  line-height: 200px;
  background-color: green;
  transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
  width: 190px;
  height: 280px;
  line-height: 200px;
  background-color: cyan;
  left: 50px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

.book:hover {
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) translateX(-30px);
}

Answer 1

只需在 .book:hover 添加 z-index。

.bookshelf {
  width: 100%;
  /* height: 800px; */
  margin-top: 32px;
  border: 1px solid #CCC;
  display: flex;
}

.book {
  width: 50px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

.side {
  position: absolute;
  border: 2px solid black;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

.spine {
  width: 50px;
  height: 280px;
  line-height: 200px;
  background-color: yellow;
  transform: rotateY(0deg) translateZ(0px);
}

.top {
  width: 50px;
  height: 190px;
  line-height: 200px;
  background-color: green;
  transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
  width: 190px;
  height: 280px;
  line-height: 200px;
  background-color: cyan;
  left: 50px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

.book:hover {
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) translateX(-30px);
  z-index: 1;
}

<div class="bookshelf">
  <div class="book">
    <div class="side spine">
      1
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 1
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      2
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 2
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      3
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 3
    </div>
  </div>
</div>

Answer 2

你也许可以做这样的事情？？让我知道

.bookshelf {
  width: 100%;
  /* height: 800px; */
  margin-top: 32px;
  border: 1px solid #CCC;
  display: flex;
}

.book {
  width: 50px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

.side {
  position: absolute;
  border: 2px solid black;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

.spine {
  width: 50px;
  height: 280px;
  line-height: 200px;
  background-color: yellow;
  transform: rotateY(0deg) translateZ(0px);
}

.top {
  width: 50px;
  height: 190px;
  line-height: 200px;
  background-color: green;
  transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
  width: 190px;
  height: 280px;
  line-height: 200px;
  background-color: cyan;
  left: 50px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

.book:hover {
  transform: rotateX(0deg) rotateY(-100deg) rotateZ(-360deg) translateY(0px) translateX(5px);
  z-index:2;
}

<div class="bookshelf">
  <div class="book">
    <div class="side spine">
      1
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 1
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      2
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 2
    </div>
  </div>
  <div class="book">
    <div class="side spine">
      3
    </div>
    <div class="side top">
    </div>
    <div class="side cover">
      Book 3
    </div>
  </div>
</div>

当所有元素都使用相同的 class 时，如何使当前 :hover 元素位于顶部

How to make current :hover element be on top when all elements are using the same class

html

css

css-selectors

hover