点击链接的父元素上的突出显示，而不是链接本身？

Question

我使用负边距使链接大于其容器，并且我隐藏了父元素的溢出。我在这个问题中解释了这样做的原因：

Responsive navigation - keep links the same height when some wrap?

这是一个工作小提琴：http://jsfiddle.net/uwEGj/

问题是点按高亮显示元素大于其容器。如果您在上面的链接上使用像iPhone这样的设备，您将看到我的意思。

要解决这个问题，请设置链接以使用此CSS规则：

-webkit-tap-highlight-color: rgba(0,0,0,0); 

但是我想在链接的可见区域上点按一下。我尝试将点按高亮颜色设置为li，例如-webkit-tap-highlight-color: rgba(100,100,100,0.6);但似乎没有做任何事情。见这里：http://jsfiddle.net/uwEGj/3/

如何才能在链接的可见区域上点击突出显示颜色？

Answer 1

考虑到我正确理解了你的问题 - 你很恼火突出显示的区域在链接的边缘溢出，就像我从谷歌图片中得到的下图一样来说明问题：

AND 您想要所有链接都是相同的高度，无论它们包含多少文字。

首先，我会更正标记以适合您的table-cell显示逻辑。如你所知，一个表有3个主要元素 - table, table-row, table-cell - 你缺少table-row元素，这使得事物渲染不正确地跨平台。

我会按以下方式执行HTML：

<div class="link-list">
    <div class="link-list-row">
        <a href="#">Link 1</a>
        <a href="#">Link 2 which has very very very long text and loger</a>
        <a href="#">Link 3</a>
    </div>
</div>

忘记负余量（-10em负利润率）。

所以将CSS更改为以下内容：

.link-list {
    display:table;
    width:100%;
}
.link-list-row {
    display:table-row;
}
a {
    display:table-cell;
    padding: 10px;
    width:33.3%;
    heigth:100%;
    background: grey;
    padding: 10px;
    border: 2px solid red;
    overflow:hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* disable the highlight */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

您的突出显示现已停用，您的<a>文字包含较长的文字包裹到下一行，而<a>更短的高度仍会获得相同的高度，因为它们现在显示为单元格。

现在为了使高亮显示尽可能精确，你需要一些简单的javascript来切换关于tap事件的类，因为highlight事件是系统绑定的。

最简单的解决方案显然是使用jQuery，但如果你不能使用任何框架，也可以用纯javascript完成。

$('a').on({ 
    'touchstart' : function(){  
        $(this).addClass('tap');
    },
    'touchend' : function(){  
        $(this).removeClass('tap');
    }
});

并为点击事件的css添加一个类：

a.tap {
    background:green;
}

现在您可以根据需要设置高亮状态的样式+高亮显示也适用于非webkit浏览器。

工作示例（尝试启用触控的设备）：http://jsfiddle.net/7M6Ey/2/