仅 CSS 滑块按钮悬停问题 - 从 AMKohn 的 CodePen 修改答案

【问题标题】：CSS Only Slider Button Hover Issue - modified from AMKohn's CodePen仅 CSS 滑块按钮悬停问题 - 从 AMKohn 的 CodePen 修改
【发布时间】：2014-05-10 06:49:10
【问题描述】：

我发现了 AMKohn 的一个简洁的 CSS Slider：

http://codepen.io/AMKohn/pen/EKJHf

滑块通过使用单选按钮和标签在“幻灯片”之间移动来工作。

幻灯片默认是隐藏的，当它们各自的单选按钮被选中时显示。

我已经修改了滑块，以便每张照片都附有一个标题，它可以扩展浏览器的宽度。

http://codepen.io/anon/pen/AlsJx/

因此，我的标记和 CSS 与原来的略有不同，但原则仍然相同（仍然使用标签和单选按钮在幻灯片之间移动）。

我认为这会影响标签（充当导航按钮）。使用时这些不会在悬停时显示

position:absolute;

但是，当 position 设置为 relative 时，按钮可以正常工作，只是它们不在正确的位置（在照片的两侧）。

谁能解释一下如何解决这个问题？

【问题讨论】：

标签： html css slider radio-button label

【解决方案1】：

解决了这个问题。

本质上，问题是由于在父元素.slides 上使用了position:absolute。

我默认设置为display:hidden，input:checked 设置为display:block。

这阻止了 div 的“堆叠”，我得出结论（以一种非常非技术性的方式）这是导航按钮不起作用的原因。

工作滑块在这里：

http://codepen.io/anon/pen/hAnre/

【讨论】：