悬停在图像之间，仅框阴影 CSS

Question

我使用 CSS 网格部分堆叠了两个图像。用户悬停的图像在 z-index 中增加，因此覆盖了另一个。用户可以在这两个图像之间来回切换。

现在我想知道是否有可能给出目前在 "focus" 中的图像/具有比 appears/disappears 更高的 z-index 和 box-shadow，具体取决于哪个图片在上面。甚至可以仅使用 CSS 吗？

我的意思的例子。而且灰色层似乎有阴影。 http://vrscigroup.com

Answer 1

你不能只用 CSS 来实现这个，你需要一些东西来告诉 CSS 哪张牌具有更高的 z-index，之后你可以应用 class.

我会用 js（jquery 也许？）添加一些东西，添加一个 class 并使用那个 class 添加框阴影，像这样：

$('.cards').hover(function() {
   // remove it from all cards
   $('.cards').removeClass('box-shadow');
   // add it to the one on hover only
   $(this).addClass('box-shadow');
});

之后只需添加 css class:

.cards.box-shadow {
    box-shadow: 0 0 20px #000;
}

当然，这只是一个例子:)

Answer 2

在这里使用 :hover 伪类而不是 JavaScript。演示：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}

/* overlapping grid items */
.item-1 {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  background-color: green;
}

.item-2 {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
  background-color: yellow;
}

/* setting higher z-index on hover */
.item-1:hover {
  z-index: 1;
}

/* adding box shadow */
.item:hover {
  box-shadow: 0 0 10px #000;
}

<div class="grid">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
</div>

悬停在图像之间，仅框阴影 CSS

Hovering betweend images, box shadow CSS only

html

css

css-grid

box-shadow