Question

我为这个问题制造了一个小提琴（但是他们也希望我在这里发布代码：/）。我希望“ hero” div悬停在另一个（重叠）的顶部。但是它正在转移其他参数，我给它提供了很高的z索引和相对位置，仍然一无所获。也有人可以告诉我如何在悬停时从div的background属性中删除线性渐变，而无需在：hover中再次指定背景。

.holder {
  margin-top: 10vh;
  margin-left: 10vw;
  width: 90vw;
  height: 90vh;
  position: relative !important;
  z-index: 0;
}

.hero {
  height: 100%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 20%;
  display: inline-block;
  z-index: 0;
  position: relative !important;
}

#first {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg');
}

#second {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg');
}

#third {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg');
}

#fourth {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg');
}

.hero:hover {
  z-index: 1000 !important;
  width: 27vw;
  cursor: pointer;
}

<div class="holder">
  <div class="hero" id="first"></div>
  <div class="hero" id="second"></div>
  <div class="hero" id="third"></div>
  <div class="hero" id="fourth"></div>
</div>

https://jsfiddle.net/aks30498/8waty2m9/27/

Answer 1

使用相同的背景属性设置渐变和图像，因此您无法使用z-index处理它。您可以更改background-size以便在悬停时隐藏渐变。然后，您可以依靠比例变换来使图像放大并与其他图像重叠：

我已删除了不必要的代码

.holder {
  margin-top: 10vh;
  margin-left: 10vw;
  width: 90vw;
  height: 90vh;
}

.hero {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 20%;
  display: inline-block;
}

#first {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg');
}

#second {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg');
}

#third {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg');
}

#fourth {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg');
}

.hero:hover {
  background-size: 0 0, cover;
  transform:scale(1.4);
  cursor: pointer;
}

<div class="holder">
  <div class="hero" id="first">

  </div>
  <div class="hero" id="second">

  </div>
  <div class="hero" id="third">

  </div>
  <div class="hero" id="fourth">

  </div>
</div>

Answer 2

Temani Afif的解决方案确实很好，但是我将添加一些其他信息：

我希望“ hero” div悬停在另一个（重叠）的顶部。但这正在转移其他人

position : relative不会将元素与父元素“分离”，只有position:absolute和position:fixed会这样做，因此您有2个选择：

选项1

在您的position: absolute类上使用.hero，我不推荐这种解决方案，因为您必须在每个英雄（以及：hover以获得更好的结果），这不是一个干净的解决方案，但我将向您展示我的意思：

left

.holder{
  margin-top:10vh;
  margin-left: 10vw;
  width:90vw;
  height:90vh;
  position : relative;
}
.hero{
  height:100%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width:20%;
  display:inline-block;
  position:absolute;
  transition: transform .2s, z-index 0.2s;
  z-index: 0;
}

#first{
background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg');
left : 0%
}
#second{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg');
left : 20%
}
#third{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg');
left : 40%
}
#fourth{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg');
left : 60%
}

.hero:hover{
  cursor:pointer;
  width: 27vw;
  z-index: 1000;
}

如您所见，没有任何变化，但是正如我所说，不要使用此解决方案。

选项2

使用Temani Afif的解决方案（他的解决方案在悬停时使用<div class="holder"> <div class="hero" id="first"> </div> <div class="hero" id="second"> </div> <div class="hero" id="third"> </div> <div class="hero" id="fourth"> </div> </div>）

注意：如果要对transform:scale(1.4);属性进行动画处理，还需要对transform属性进行动画处理以获得更好的效果（如果省略z-index，则会出现一个奇怪的重叠问题），在这种情况下，您必须在英雄职业上设置z-index：

position:relative

.holder{
  margin-top:10vh;
  margin-left: 10vw;
  width:90vw;
  height:90vh;
}
.hero{
  height:100%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width:20%;
  display:inline-block;
  position:relative;
  transition: transform .2s, z-index 0.2s;
  z-index: 0;
}

#first{
background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg');
}
#second{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg');
}
#third{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg');
}
#fourth{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg');
}

.hero:hover{
  cursor:pointer;
  transform: scale(1.5);
  z-index: 1000;
}

在这个小提琴上，您可以尝试以下不同：https://jsfiddle.net/8waty2m9/73/

顶部：带有z-index
底部：没有z-index

Z索引不适用于相对位置

2 个答案: