突破按钮

安迪展示了一种使用语义HTML创建可点击卡组件的巧妙方法。该技术涉及卡中的按钮，但整个卡充当可点击区域。这是通过采用伪元素来实现的，该元素超出了按钮的边界，覆盖了整个卡。由于伪元素覆盖了文本，因此缺点是略有损害的文本选择。但是，安迪认为这种方法优于使整个卡<a></a>元素，因为这将损害语义，并可能为辅助技术造成重大问题。

使用时适用相同的原则<a></a>链接而不是按钮。但是，在这种情况下，将整个区域包裹在链接中通常更简单，使用按钮样的部分使用<span></span>或类似的元素，以实现视觉一致性。

该技术解决了一个类似于嵌套链接的常见问题：一个包含其他独立链接区域的大型链接块。嵌套锚链接是有问题的。 Sara Soueidan的优雅解决方案涉及在卡中放置一个绝对位置的“覆盖”链接，以包含整个可点击区域，从而可以使用z-index将卡中的其他链接放在顶部。

可以参考的Codepen演示Sara Soueidan解决方案。

以上是突破按钮的详细内容。更多信息请关注PHP中文网其他相关文章！