纯CSS滑块开发求助：悬停文本按钮切换图片的实现方案

你的问题核心在于选择器使用错误——你用了相邻兄弟选择器+，但#button-1和#slide-1既不是相邻元素，也不属于同级层级，所以这条规则完全不会生效。我们可以利用CSS的兄弟选择器和绝对定位来实现需求，全程不需要JS，纯CSS就能搞定。

核心思路 #

1. 把所有幻灯片设置为绝对定位，让它们重叠在同一个容器位置，默认只显示slide-0，其余隐藏。
2. 利用父元素的同级关系（.slider-hp和.row是兄弟元素），通过按钮的:hover状态控制对应幻灯片的显示/隐藏。
3. 当鼠标离开按钮时，CSS会自动恢复默认状态，重新显示slide-0。

完整实现代码 #

HTML结构（保留你原有结构，确保层级正确即可）

<!-- 幻灯片容器 -->
<div class="slider-hp">
  <div id="slide-0"><img class="slider-homepage homepage-0" src="http://www.jacquesgiral.com/wp-content/uploads/jacques-giral-photographie-accueil-paris.jpg" alt="Homepage" width="2048" height="688" /></div>
  <div id="slide-1"><img class="slider-homepage archi-deco-1" src="http://www.jacquesgiral.com/wp-content/uploads/2015/06/homepage.jpg" alt="Archi Déco" width="2048" height="614" /></div>
  <div id="slide-2"><img class="slider-homepage" src="你的图片地址" alt="Slide 2" /></div>
  <div id="slide-3"><img class="slider-homepage" src="你的图片地址" alt="Slide 3" /></div>
  <div id="slide-4"><img class="slider-homepage" src="你的图片地址" alt="Slide 4" /></div>
  <div id="slide-5"><img class="slider-homepage" src="你的图片地址" alt="Slide 5" /></div>
</div>

<!-- 按钮容器 -->
<div class="row">
  <div class="col-md-2 col-md-offset-1">
    <a id="button-1" title="Lien vers ARCHI-DÉCO" href="https://www.jacquesgiral.com/portfolio/architecture-decoration/" rel="bookmark">1ST BUTTON</a>
  </div>
  <div class="col-md-2">
    <a id="button-2" title="Lien vers ..." href="你的链接地址" rel="bookmark">2ND BUTTON</a>
  </div>
  <div class="col-md-2">
    <a id="button-3" title="Lien vers ..." href="你的链接地址" rel="bookmark">3RD BUTTON</a>
  </div>
  <div class="col-md-2">
    <a id="button-4" title="Lien vers ..." href="你的链接地址" rel="bookmark">4TH BUTTON</a>
  </div>
  <div class="col-md-2">
    <a id="button-5" title="Lien vers ..." href="你的链接地址" rel="bookmark">5TH BUTTON</a>
  </div>
</div>

CSS代码

/* 幻灯片容器设置相对定位，让内部绝对定位的幻灯片以它为基准 */
.slider-hp {
  position: relative;
  /* 根据你的图片尺寸设置容器大小，取最大的高度值 */
  height: 688px;
  width: 100%;
  overflow: hidden; /* 防止图片溢出容器 */
}

/* 所有幻灯片绝对定位，重叠在一起 */
.slider-hp > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 用opacity代替visibility，支持过渡动画 */
  visibility: hidden;
  transition: all 0.3s ease; /* 可选：添加过渡动画，让切换更自然 */
}

/* 默认显示slide-0 */
#slide-0 {
  opacity: 1;
  visibility: visible;
}

/* 当hover按钮时，隐藏默认的slide-0 */
.row #button-1:hover ~ .slider-hp #slide-0,
.row #button-2:hover ~ .slider-hp #slide-0,
.row #button-3:hover ~ .slider-hp #slide-0,
.row #button-4:hover ~ .slider-hp #slide-0,
.row #button-5:hover ~ .slider-hp #slide-0 {
  opacity: 0;
  visibility: hidden;
}

/* 分别对应每个按钮hover时，显示对应的幻灯片 */
.row #button-1:hover ~ .slider-hp #slide-1 {
  opacity: 1;
  visibility: visible;
}

.row #button-2:hover ~ .slider-hp #slide-2 {
  opacity: 1;
  visibility: visible;
}

.row #button-3:hover ~ .slider-hp #slide-3 {
  opacity: 1;
  visibility: visible;
}

.row #button-4:hover ~ .slider-hp #slide-4 {
  opacity: 1;
  visibility: visible;
}

.row #button-5:hover ~ .slider-hp #slide-5 {
  opacity: 1;
  visibility: visible;
}

/* 可选：给按钮添加hover样式，提升交互体验 */
.row a {
  display: inline-block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  border: 1px solid #ddd;
  transition: background-color 0.3s;
}

.row a:hover {
  background-color: #f5f5f5;
}

关键说明 #

• 绝对定位：让所有幻灯片重叠在容器内，默认只显示第一张，这是纯CSS滑块的基础布局逻辑。
• 兄弟选择器~：因为.row和.slider-hp是同级元素，我们可以通过.row内的按钮hover状态，控制后面的.slider-hp里的幻灯片。注意：如果你的.slider-hp在.row之后，这个选择器才生效（你的结构刚好符合这个顺序）。
• 过渡动画：添加transition属性让切换更平滑，提升用户体验，这是可选但推荐的优化。
• 自动恢复默认：当鼠标离开按钮时，hover状态消失，CSS会自动恢复slide-0的显示，不需要额外代码处理。

内容的提问来源于stack exchange，提问作者flo-uxdev