html - 在不影响布局的情况下使内联链接的可点击区域更大

标签 html css accessibility

我希望使链接的可点击区域比它们实际的可访问性更大,因为对于目标用户来说,点击它们可能很困难。大约 1.5 倍的尺寸可能是合适的。这些是普通文本中的链接,因此我实际上无法将它们变大,否则会弄乱布局。

我使用 HTML5、CSS3、JS 甚至 Mozilla 的特定功能来实现这一点,因为最新的 Firefox 版本是唯一的目标,尽管基本的 CSS/HTML 而不是这样的黑客当然会更可取!

最佳答案

一个可行的选择是使用 :after 伪元素。像这样:

a {
    position: relative
}
.bigger:after{
    content:"";
    padding: 50px;  
    position: absolute;
    left: -25px;
    top: -25px;
} 

可以根据需要调整数字。我可以立即看到的唯一缺点是您是否需要支持 IE8 之前的任何内容。 http://caniuse.com/#feat=css-gencontent

这是一个 fiddle .

关于html - 在不影响布局的情况下使内联链接的可点击区域更大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15611905/

相关文章:

javascript - 如何让可见性过渡延迟?

jquery - 向 jQuery .toggle() 方法添加 HTML5 隐藏属性支持

Java:在哪里可以找到 WindowsAccessbridge 的源代码?

html - 修复了底部导航栏下拉菜单在较小屏幕上下拉到导航栏的问题

javascript - 使用 $(document).ready(function() 访问另一个 js 文件中的函数

Android Webview在html表格中垂直居中切片图像

css - 将 tabindex 添加到 css :after content

html - SVG 线性渐变在 Safari 中不起作用

自定义 js 文件中的 javascript onclick null

html - SCSS 如何在鼠标悬停时显示此结果