如何在悬停在图像上时将按钮显示为效果？

如何解决如何在悬停在图像上时将按钮显示为效果？

我的网页中有一张图片（班级照片）和一个名为“添加到购物车”的按钮（班级 btn）。我希望它能够工作，当有人将鼠标悬停在产品图像上时，“添加到购物车”按钮开始显示在图像上，同时图像的不透明度会降低一点。当我将鼠标悬停在图像上时，我无法弄清楚如何使按钮出现。我对网络开发很陌生，所以请帮忙。我在 css 中写了什么，以便当鼠标悬停在图像上时按钮仅在图像顶部可见。

    <div>
        <img class="Photo">
        <button class= "btn">
    <div>
    <style>
        .btn:hover{
        }
    <style
        

解决方法

为了连接图像 (class="photo") 和按钮 (class="btn")，您需要某种形式的容器（例如带有 div 的 class="container" 元素），其中包含

然后您可以使用 transition css 属性来平滑切换不透明度：

.btn {
  display: none;
}

.container:hover .btn {
  display: inline-block;
  position: absolute;
}

.container:hover .photo {
  opacity: 0.5;
  transition: 0.3s;
}