鼠标悬停背景图显示Pinterest图标：两类CSS问题求助

两个问题都可以用纯CSS解决，无需JavaScript，核心修改思路如下：

解决图标过渡突兀问题 #

display: none/block 无法触发CSS过渡动画，改用 visibility 配合 opacity 实现平滑显示：

• 初始状态设置 visibility: hidden + opacity: 0，元素仍占据空间但不可见
• 悬停时切换为 visibility: visible + opacity: 1，结合过渡属性实现缓慢出现

解决悬停图标时背景图淡出消失问题 #

将悬停触发源从图片本身改为父容器，只要鼠标在容器范围内（包含图标），就保持图片半透明和图标显示状态：

• 给父容器添加 position: relative，确保绝对定位的图标相对于容器定位
• 把图片的半透明触发条件从 .fading-image:hover 改为 .fading-image-container:hover .fading-image

修改后的完整代码 #

CSS 代码

.fading-image-container {
    position: relative; /* 让图标相对于容器定位 */
    display: inline-block; /* 适配图片宽度，避免容器占满整行 */
}

.fading-image {
    transition: opacity 1s; /* 把过渡属性放在常态，而非hover状态，确保淡出也有动画 */
}

.fading-image-container:hover .fading-image {
    opacity: 0.5;
}

.pinterest-appear {
    visibility: hidden; /* 替代display:none，支持过渡 */
    position: absolute;
    bottom: 50px;
    left: 50px;
    width: 20px;
    height: 20px;
    transition: opacity 750ms ease-in-out 200ms, visibility 0ms linear 200ms; /* 延迟visibility切换，配合opacity过渡 */
    opacity: 0;
}

.fading-image-container:hover .pinterest-appear {
    visibility: visible;
    opacity: 1;
    transition-delay: 0ms; /* 悬停时立即显示visibility，同时播放opacity动画 */
}

HTML 代码

<div class="fading-image-container">
  <img class="fading-image" src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/RO_PIX_EV_01_1320px.jpg">
  <a class="pinterest-appear" href="https://pinterest.com/pin/create/button/" target="_blank">
    <img src="http://box5385.temp.domains/~atelifw5/wp-content/uploads/2022/12/Pinterest_Black.svg">
  </a>
</div>

内容的提问来源于stack exchange，提问作者MC Squared