Question

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

现在我想知道是否可以提供当前所在的图像＆＃34;焦点＆＃34; /具有更高的z-index一个box-shadow出现/消失，取决于哪个图像在顶部。甚至可以使用CSS吗？

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

Answer 1

你只能使用CSS来实现这一点，你需要能告诉CSS哪个是具有更高z-index的卡，之后你可以申请一个类。

我会用js添加一些东西（可能是jquery？），它会添加一个类并使用该类来添加框阴影，如下所示：

$('.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类：

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

当然，这只是一个例子：）

Answer 2

此处使用:hover伪类而不是JavaScript。演示：

＆＃13;

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

＆＃13;

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

＆＃13;

只悬停图片，框阴影CSS

2 个答案: