点击链接的父元素突出显示，而不是链接自身？ [英] Tap highlight on parent element of link, not link itself?

问题描述

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

Ive used negative margin to make a link larger than its container, and ive hidden the overflow of the parent element. My reasons for doing so are explained in this question:

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

Here is a working fiddle: http://jsfiddle.net/uwEGj/

The issue is that the tap highlight shows the element being larger than its container. If you use a device like an iPhone on the link above you will see what I mean.

To solve this ive set the link to have this CSS rule:

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

However I would like a tap highlight over the visible area of the link. I tried to set a tap highlight color to the li e.g. -webkit-tap-highlight-color: rgba(100,100,100,0.6); but it doesnt seem to do anything. See here: http://jsfiddle.net/uwEGj/3/

How can I have a tap highlight colour only over the visible area of the link?

解决方案

Considering I understand your problem correctly - you are annoyed that the highlighted area overflows a bit over the edge of the link, as on the following image I've got from Google images to illustrate the problem:

AND you want all links to be same height no matter how much text they contain.

First I would correct the markup to fit your table-cell display logic. As you know a table has 3 main elements - table, table-row, table-cell - you are missing the table-row element which makes thing render improperly cross platforms.

I would do the HTML as following:

<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>

Than forget about the negative margin (-10em negative margin).

So change the CSS to the following:

.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;
}

Your highlight is now disabled and your <a> with longer text wraps to next line and also shorter <a> 's will still get same height since they are now displaying as cells.

Now in order to make the highlight as precise as possible you will need some simple javascript to toggle a class on tap events, since the highlight event is system bound.

Most simple solution is using jQuery obviously, but can be accomplished with pure javascript too if you can't use any frameworks.

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

and add a class to your css for the tap event:

a.tap {
    background:green;
}

Now you can style your hightlighted state as you wish + the highlight will work on non-webkit browsers also.

Working sample (try on touch enabled device): http://jsfiddle.net/7M6Ey/2/

这篇关于点击链接的父元素突出显示，而不是链接自身？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！