css - Tap highlight on parent element of link, not link itself? -

ive used negative margin make link larger container, , ive hidden overflow of parent element. reasons doing explained in question:

responsive navigation - keep links same height when wrap?

here working fiddle: http://jsfiddle.net/uwegj/

the issue tap highlight shows element being larger container. if use device iphone on link above see mean.

to solve ive set link have css rule:

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

however tap highlight on visible area of link. tried set tap highlight color li e.g. -webkit-tap-highlight-color: rgba(100,100,100,0.6); doesnt seem anything. see here: http://jsfiddle.net/uwegj/3/

how can have tap highlight colour on visible area of link?

considering understand problem correctly - annoyed highlighted area overflows bit on edge of link, on following image i've got google images illustrate problem:

and want all links same height no matter how text contain.

first correct markup fit table-cell display logic. know table has 3 main elements - table, table-row, table-cell - missing table-row element makes thing render improperly cross platforms.

i html following:

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

than forget negative margin (-10em negative margin).

so change css following:

.link-list {     display:table;     width:100%; } .link-list-row {     display:table-row; } {     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 highlight */     -moz-box-sizing:border-box;     -webkit-box-sizing:border-box;     box-sizing:border-box; } 

your highlight disabled , <a> longer text wraps next line , shorter <a> 's still same height since displaying cells.

now in order make highlight precise possible need simple javascript toggle class on tap events, since highlight event system bound.

most simple solution using jquery obviously, can accomplished pure javascript if can't use frameworks.

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

and add class css tap event:

a.tap {     background:green; } 

now can style hightlighted state wish + highlight work on non-webkit browsers also.

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