當所有元素都使用同一個類時，如何使當前：懸停元素位于頂部

我正在嘗試使用純 CSS 和 HTML 創建一個簡單的書架。但是，我正在努力讓當前滑鼠懸停的書擁有最高的z-index.

沒有JS這可能嗎？也許巧妙地使用 CSS 選擇器？

JSFiddle

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

uj5u.com熱心網友回復：

只需z-index在.book:hover.

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

uj5u.com熱心網友回復：

你可以做這樣的事情也許？讓我知道

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

標籤：html css css 选择器 徘徊

上一篇：使用document.getElementById("").innerHTML時如何更改段落文本的字體？

下一篇：如何更改警報訊息組件的不可訪問子類的CSS？