14

我希望使链接的可点击区域大于它们实际的可访问性，因为对于目标用户来说，很难点击它们。大约 1.5 倍的大小可能是合适的。这些是普通文本中的链接，所以我实际上不能让它们变大，这会弄乱布局。

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

4

5 回答 5

16

一种可行的选择是使用:after伪元素。像这样的东西：

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

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

这是一个小提琴。

于 2013-03-27T14:15:55.950 回答
8

您可以使用更大的填充来做到这一点。

例如：

.a{
    padding: 20px;
    margin: -20px; //lets keep the layout
}

这里有一个活生生的例子：http: //jsfiddle.net/u5kuJ/1/

更新：

用你的小提琴：http: //jsfiddle.net/XXgqu/1/

于 2013-03-25T09:54:26.463 回答
1

我已经对 gotohales 答案进行了更新，无论文本的长度如何，它都可以使用，然后添加一些填充。

http://jsfiddle.net/vG7UY/2/

a {
  position: relative;
}
  .biggerForMobile:before{
  content:""; 
  width:100%;
  height:100%;
  position:absolute;
  padding:12px;
  top:-10px;
  left:-10px;
}
于 2014-08-06T08:20:15.283 回答
0

您可以使用: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 解决方案确实需要考虑我们正在填充的元素的宽度/高度，否则填充将偏离中心。

于 2014-12-05T07:22:25.230 回答
-1

我很确定你不能做你所要求的。唯一想到的是添加填充、边距和行高。虽然这不是我最喜欢的解决方案，但根据站点的上下文，可能会有一个列出所有链接的页面，它有一个更大的目标。

此外，也许可以使用具有良好对比度的outline& outline-offsetCSS 属性来让人们知道链接上。

另一件事是，需要更大目标的人更频繁地使用键盘来浏览网站，因此使您的网站对键盘更友好可能会有所帮助。例如，您是否有标题和侧边栏，通过代码，它们是否位于主要内容之前？如果是这样，放置一个或几个跳过导航链接（取决于布局）也可能会有所帮助。

于 2013-03-26T13:45:39.683 回答