html - 如何将 png 放置在另一个图像上并仍然能够与两者进行交互？

Question

我正在构建一个投资组合网站，我想要在背景之上放置一个模型，但是当我将鼠标悬停在模型上时，我无法与背景进行交互。我希望它们都可以缩放，但是模型应该比背景缩放更多，因此我需要分别在它们上悬停一个 :hover。

我尝试摆弄 z-index 但没有成功。这是它现在的样子:https://imgur.com/NPrHdAI

这是我的 HTML 和 CSS:

.try {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 80px 0px 60px 10px;
}

.bg {
  height: 250px;
  margin: 10px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
  -moz-box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
  box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
  transition: all .3s ease-in-out;
}

.mockup {
  position: absolute;
  height: 300px;
  transition: all .3s ease-in-out;
}

.mockup:hover {
  transform: scale(1.2);
}

<div class="try">
  <div>
    <img class="mockup" src="img/mockup.png">
    <img class="bg" src="img/bg.jpg">
  </div>

  <div>
    <img class="mockup" src="img/mockup.png">
    <img class="bg" src="img/bg.jpg">
  </div>

  <div>
    <img class="mockup" src="img/mockup.png">
    <img class="bg" src="img/bg.jpg">
  </div>

</div>

我希望两个元素分别缩放，但模型阻止了背景在悬停时缩放。

Answer 1

您可以使用触发悬停的包装器 div，并为 mockup 和 bg 分配不同的效果，如下所示:

.wrapper:hover .mockup {
    transform: scale(1.2);

}

.wrapper:hover .bg {
    transform: scale(5.0);

}

完整片段:(您可以看到它们的大小都不同)

.try {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    margin: 80px 0px 60px 10px;
}

.bg {

    height: 250px;
    margin: 10px;
    border-radius: 3px;

    -webkit-box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);
    -moz-box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);
    box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);

    transition: all .3s ease-in-out;
}

.mockup {
    position: absolute;
    height: 300px;



    transition: all .3s ease-in-out;
}

.wrapper:hover .mockup {
    transform: scale(1.2);

}

.wrapper:hover .bg {
    transform: scale(5.0);

}

<div class="wrapper">
            <img class="mockup" src="img/mockup.png">
            <img class="bg" src="img/bg.jpg"> 
</div>