仅在鼠标悬停时显示Swiper导航按钮的CSS实现问题

你当前写法的核心问题是：当给.swiper-button-prev设置display: none后，元素会完全脱离文档流，页面上不存在这个元素的可交互区域，鼠标根本无法触发它的hover事件，所以后续的display: block永远不会生效。

正确的实现方式 #

推荐通过视觉隐藏但保留元素布局的方式来实现，同时监听Swiper容器的hover事件（更符合用户交互逻辑：鼠标滑到轮播区域就显示按钮）：

方案1：使用opacity（带平滑过渡）

/* 默认隐藏按钮 */
.swiper-button-prev, .swiper-button-next {
  opacity: 0;
  transition: opacity 0.3s ease; /* 可选，添加过渡动画提升体验 */
}

/* 鼠标悬停轮播容器时显示按钮 */
.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next {
  opacity: 1;
}

方案2：使用visibility

如果不需要过渡动画，也可以用visibility属性：

.swiper-button-prev, .swiper-button-next {
  visibility: hidden;
}

.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next {
  visibility: visible;
}

为什么这两种方案可行？ #

opacity: 0和visibility: hidden只是让元素在视觉上不可见，但元素依然保留在文档流中，占据原本的位置，也能正常接收鼠标事件。监听Swiper容器的hover，能保证用户只要滑到轮播区域，按钮就会显示，交互逻辑更合理。

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