如何实现图标被hover时才显示的交互效果？

纯CSS实现（推荐，无需额外脚本） #

这种方案性能最优，适合绝大多数纯交互的场景：

场景1：hover图标自身时显示 #

默认将图标设为透明不可交互，hover时恢复可见即可，可按需添加过渡动画让效果更顺滑：

.target-icon {
  /* 默认隐藏 */
  opacity: 0;
  /* 隐藏时阻止鼠标点击等事件触发 */
  pointer-events: none;
  /* 可选：添加0.2秒的淡入淡出过渡 */
  transition: opacity 0.2s ease;
}

.target-icon:hover {
  opacity: 1;
  pointer-events: auto;
}

如果不需要过渡效果，也可以直接用display: none和display: inline-block切换，缺点是显隐会比较生硬，且隐藏时图标不占用页面布局空间。

场景2：hover图标所在的父容器时显示 #

这是更常用的场景，比如列表项、卡片尾部的操作图标，hover整行/整块区域才显示图标：

/* 父容器样式无需特殊修改，图标默认隐藏 */
.container .target-icon {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* 父容器hover时子级图标显示 */
.container:hover .target-icon {
  opacity: 1;
  pointer-events: auto;
}

JS实现（仅适合需要配合复杂逻辑的场景） #

如果显隐逻辑需要和其他业务逻辑联动，可以通过鼠标事件控制：

const icon = document.querySelector('.target-icon')
// 鼠标移入显示
icon.addEventListener('mouseenter', () => {
  icon.style.opacity = '1'
})
// 鼠标移出隐藏
icon.addEventListener('mouseleave', () => {
  icon.style.opacity = '0'
})

注意：如果需要隐藏时不占用布局空间，可把上述代码里的opacity属性替换为display，对应值为none和block/inline-block即可。

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