點擊突出顯示鏈接的父元素，而不鏈接自己？

我使用了負邊距來使鏈接大於它的容器，並且我隱藏了父元素的溢出。我這樣做的原因，這個問題進行了說明：點擊突出顯示鏈接的父元素，而不鏈接自己？

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

的問題是，水龍頭高亮顯示的元素比它的容器大。如果你在上面的鏈接上使用像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/

我怎樣才能在鏈接的可見區域點擊突出顯示顏色？

來源

2014-06-27 Evans

到底爲什麼你要使用負保證金？如果你正在使用'display：table' - 你可以將''設置爲父節點的寬度和高度的100％。現在你在鏈接的周圍給出了一個-10em的邊距 - 我看不到這樣做的原因（翻譯成像素，它在鏈接周圍給出了-100px的邊距）。 – easwee

考慮到我正確地理解你的問題 - 你是惱火的是，突出顯示區域溢出有點過的鏈接的邊緣，如下面的圖像上，我從谷歌獲得的圖像來說明問題：

overflowing highlight

和你想所有鏈接是相同的高度，無論他們多麼文本包含。

首先，我將更正標記以適合您的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來切換輕按事件上的類，因爲高亮事件是系統綁定的。

最簡單的解決方案顯然是使用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/

來源

2014-07-01 14:38:18 easwee

點擊突出顯示鏈接的父元素，而不鏈接自己？

回答

相關問題