我希望使链接的可点击区域大于它们实际的可访问性,因为对于目标用户来说,很难点击它们。大约 1.5 倍的大小可能是合适的。这些是普通文本中的链接,所以我实际上不能让它们变大,这会弄乱布局。
我利用 HTML5、CSS3、JS 甚至 Mozilla 的特定功能来实现这一点,因为最新的 Firefox 版本是唯一的目标,尽管基本的 CSS/HTML 而不是这样的黑客当然会更可取!
我希望使链接的可点击区域大于它们实际的可访问性,因为对于目标用户来说,很难点击它们。大约 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
这是一个小提琴。
您可以使用更大的填充来做到这一点。
例如:
.a{
padding: 20px;
margin: -20px; //lets keep the layout
}
这里有一个活生生的例子:http: //jsfiddle.net/u5kuJ/1/
更新:
用你的小提琴:http: //jsfiddle.net/XXgqu/1/
我已经对 gotohales 答案进行了更新,无论文本的长度如何,它都可以使用,然后添加一些填充。
a {
position: relative;
}
.biggerForMobile:before{
content:"";
width:100%;
height:100%;
position:absolute;
padding:12px;
top:-10px;
left:-10px;
}
您可以使用:after
伪元素来填充元素,并使用transform
和position
可以将填充定位在元素中心的中心,而不会影响其他元素。
将 更改为padding: 30px
您需要的任何填充。
.padded-click {
position: relative;
}
.padded-click:after{
padding: 30px;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
注意:这是基于 gotohales 解决方案,这是一种很好的方法,但是使用带有像素值的顶部和左侧作为 gotohales 解决方案确实需要考虑我们正在填充的元素的宽度/高度,否则填充将偏离中心。
我很确定你不能做你所要求的。唯一想到的是添加填充、边距和行高。虽然这不是我最喜欢的解决方案,但根据站点的上下文,可能会有一个列出所有链接的页面,它有一个更大的目标。
此外,也许可以使用具有良好对比度的outline
& outline-offset
CSS 属性来让人们知道链接上。
另一件事是,需要更大目标的人更频繁地使用键盘来浏览网站,因此使您的网站对键盘更友好可能会有所帮助。例如,您是否有标题和侧边栏,通过代码,它们是否位于主要内容之前?如果是这样,放置一个或几个跳过导航链接(取决于布局)也可能会有所帮助。