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>

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

标签： htmlcss

Answer 1

mockup您可以使用触发悬停的包装器 div ，并将不同的效果分配给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>