使链接链接的可点击区域变大而不会影响布局

我期望让链接的可点击区域大于实际访问的可点击区域，因为对于预期用户来说，可能很难击中它们。大小约为1.5x可能是合适的。这些是正常文本的链接，所以我实际上无法让它们变大，这会弄乱布局。使链接链接的可点击区域变大而不会影响布局

我利用HTML5，CSS3，JS甚至是Mozilla的特定功能来完成这个任务，因为最新的Firefox版本是唯一的目标，尽管基本的CSS/HTML而不是这样的黑客当然会更好！

2013-03-25 not amused

可能有效的一个选项是使用:after伪元素。类似这样的：

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

数字可以随意调整。唯一不足的是我可以马上看到，如果你需要支持任何IE8之前的东西。 http://caniuse.com/#feat=css-gencontent

这是fiddle。

来源

2013-03-27 14:15:55 gotohales

这个问题中可能包含一个好东西，我很幸运，因为我不需要支持任何旧版浏览器，而且这个工作正常。它在实际的页面上有些虚无the the（更大的点击区域并不集中在文本上），但是这可以通过同样不寻常的调整来解决。 – 2013-03-28 07:39:29

Opera使用上面的例子并没有使我的clickbox成为正确的方式。对我来说更好的一点是：http://jsfiddle.net/WD8Yh/47/ – 2014-05-22 08:28:09

你可以使用更大的填充。

例如：

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

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

更新时间：

有了您的提琴：http://jsfiddle.net/XXgqu/1/

来源

2013-03-25 09:54:26 Alvaro

这是行不通的。这些是文字链接，可点击区域必须与正常文字重叠。 http://jsfiddle.net/XXgqu/ – 2013-03-25 11:07:26

我已经更新了我的答案。现在检查。 – Alvaro 2013-03-25 11:16:49

奇怪的是，它只能从左侧和顶部点击。它的右边和下面不是。否则，这就是我正在寻找的效果。 – 2013-03-25 11:20:11

-1

我敢肯定你不能做你在问什么。唯一想到的就是添加填充，边距和线条高度。虽然这不是我最喜欢的解决方案，但取决于网站的上下文，也许有一个列出所有链接的页面，其中有一个更大的目标。

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

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

来源

2013-03-26 13:45:39

很好的建议，但界面不是鼠标和键盘，而只是一个单击触摸屏供公众使用，所以我确实需要更大的击中区域。 – 2013-03-28 07:36:47

在 – 2013-03-28 22:11:02

我已经做了更新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-06 08:20:15

可以使用:after伪元素到垫的元件，以及使用transformposition和你可以定位中心在元件的中心填充，而不会影响其他元素。

将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-05 07:22:25

使链接链接的可点击区域变大而不会影响布局

回答

相关问题