在后台管理系统、文件管理器或卡片列表中，经常能看到这样一种交互：鼠标悬停在某一行或某个卡片上时，右上角才浮现出删除、编辑等操作按钮，移开鼠标后又自动隐藏。这种效果既能保持界面干净，又能保证操作入口触手可及。用纯CSS实现这类效果的核心思路就是:hover伪类配合选择器联动，下面详细介绍几种常用方案及其适用场景。
方案一：hover时控制子元素的opacity和visibility
最经典也最推荐的做法，是把操作按钮作为列表项的子元素，默认状态下设置opacity: 0并且visibility: hidden，当父元素处于hover状态时再把它们切换为可见。HTML结构大致如下：
<ul class="list">
<li class="item">
<span class="text">列表内容</span>
<span class="actions">
<button>编辑</button>
<button>删除</button>
</span>
</li>
</ul>对应的CSS写法：
.item .actions {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.item:hover .actions {
opacity: 1;
visibility: visible;
}这里有一个细节值得注意：为什么要同时写opacity和visibility两个属性？如果只使用opacity: 0，按钮虽然看不见，但仍然占据布局空间并可以接收鼠标事件，用户可能在不知情的情况下点击到隐藏按钮。而visibility: hidden可以让元素不响应事件，但它本身不支持平滑的过渡动画（会直接跳变）。两者结合再配合transition，就能既实现淡入淡出效果，又避免事件穿透问题。
这种写法兼容性极好，所有现代浏览器都支持，而且transition可以让出现和消失的过程更加柔和。如果不需要动画，直接用display: none切换也可以，但display属性无法参与过渡动画，效果会比较生硬，一般在对动画没有要求时才使用。
方案二：利用伪元素配合hover实现
如果操作按钮本身不是一个真实的DOM元素，而只是一个装饰性的图标或提示符号，可以直接用伪元素来实现，不需要额外添加HTML标签。例如悬停卡片时在右上角显示一个加号图标：
.card {
position: relative;
}
.card::after {
content: '+';
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 50%;
background: #409eff;
color: #fff;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none; /* 防止伪元素遮挡点击 */
}
.card:hover::after {
opacity: 1;
}伪元素方案的关键点在于position: absolute定位和content属性。伪元素必须设置content才会渲染出来，哪怕是空字符串。由于伪元素无法直接绑定JavaScript事件，如果按钮需要响应点击，还是得回到方案一使用真实元素。另外建议给伪元素加上pointer-events: none，避免它遮挡住下方内容的点击区域。
伪元素还可以配合attr()函数读取HTML属性，实现动态内容。例如content: attr(data-tip)可以在悬停时显示元素上data-tip属性定义的提示文字，这是制作纯CSS tooltip的常用技巧，与操作按钮的显示逻辑是相通的。
方案三：兄弟选择器与hover联动
有时操作区域和触发hover的元素并非父子关系，而是兄弟关系，这时可以利用兄弟选择器。例如图标在左、按钮在右的结构：
<div class="row">
<span class="icon">文件</span>
<span class="btn-group">
<button>下载</button>
</span>
</div>
.btn-group {
opacity: 0;
transition: opacity 0.2s;
}
.icon:hover + .btn-group,
.row:hover .btn-group {
opacity: 1;
}相邻兄弟选择器+要求两个元素紧邻，如果中间隔了其他元素则需要使用通用兄弟选择器~。这种写法灵活性稍差，因为CSS选择器只能向后选择兄弟节点，无法从后面的元素控制前面的元素。实际项目中更常见的做法是让共同的父元素接收hover，再统一控制内部所有子元素，也就是回到方案一的结构。
常见问题与避坑指南
第一个坑是触屏设备。移动端没有真正的hover状态，用户第一次点击往往触发hover，第二次才触发点击事件，体验很差。建议通过媒体查询@media (hover: hover)判断设备是否支持悬停，只在支持的设备上启用隐藏逻辑：
@media (hover: hover) {
.item .actions {
opacity: 0;
visibility: hidden;
}
.item:hover .actions {
opacity: 1;
visibility: visible;
}
}这样在触屏设备上按钮始终显示，避免了不可用的隐藏入口。
第二个坑是键盘可访问性。只依赖hover的按钮，键盘用户通过Tab键聚焦时无法看到按钮。可以补充:focus-within状态，当焦点进入列表项时也显示操作按钮：
.item:hover .actions,
.item:focus-within .actions {
opacity: 1;
visibility: visible;
}第三个坑是布局抖动。如果使用display: none切换，按钮的出现会挤压其他内容导致布局跳动。解决办法是让操作按钮绝对定位在容器内部，或者始终占位只是切换透明度，这样无论显示与否都不会影响周边元素的布局。
总结一下，纯CSS实现hover显示操作按钮主要依靠选择器联动：父子结构用后代选择器，兄弟结构用+或~，装饰性内容可以用伪元素。显示隐藏推荐opacity + visibility组合以获得平滑动画且不响应事件，同时记得用@media (hover: hover)照顾触屏用户，用:focus-within照顾键盘用户，这样写出来的交互才足够健壮。