在超鏈接的區域內顯示鏈接

基本上在我們的一個頁面上我們有幾個超鏈接區域。這些區域不僅可以在有文字的地方點擊，而且可以在整個背景中設置與display:block的鏈接。你可以看到這樣一個可點擊區域的簡單例子here。

所以最近的權力，要求我在這方面增加另一個鏈接。內部鏈接對於可點擊區域會有不同的目標，並且只能點擊它的即時文本，其餘的可點擊區域將圍繞它。您可以看到這將如何在這demo（黃色位代表內部鏈接的可點擊部分，紅色代表外部鏈接）合在一起。 注意：我意識到這看起來是一個非常混亂的實現，但我恐怕它已經不在我的手中了。

設計（有很好的理由），我不能簡單地窩我<a>標籤，像這樣：

<a href="#" class="clickable_area"> 
    <span>RED Background and clickable</span><br/> 
    <span>RED Background and clickable</span><br/> 
    <span>RED Background and clickable</span><br/> 
    <a class="inner_link" href="#">Yellow background and it's own link</a><br/> 
</a>

試圖巢標籤這樣使外部鏈接被的</a>一審過早關閉如所見here。

一個解決方案可能是讓內部鏈接成爲span元素，然後使用onclick事件通過JavaScript執行超鏈接，但是我沒有發現這種方法，並且真的更喜歡避免任何JavaScript變通方法。

我已經嘗試了幾個與CSS等解決方法，但至今我已經幹了。我有一種感覺，絕對定位或負利潤率可能是關鍵，但我從來都不擅長。

如果有人可以提出任何建議，我會非常感激。

來源

2010-11-24 irishbuzz

這不會幫助，但這樣的嵌套錨將是無效的標記，並可能進一步導致問題的路線。我懷疑它可以用傳統的手段來完成，但是這是人類中衆神的家園。如果可能的話，我還建議重新實施實施（即使用可輕鬆支持多個鏈接的可點擊的「div」）（但也欣賞「權力」的固執） – Ross 2010-11-24 22:08:01

您不能嵌套鏈接。我的建議是內部鏈接絕對定位在外部區域的上方，有點像這樣：

<div class="container" style="position:relative"> 
<a href="..."> 
<span>RED Background and clickable</span><br/> 
<span>RED Background and clickable</span><br/> 
<span>RED Background and clickable</span><br/> 
</a> 
<a href="..." style="position:absolute;top:...px;left:...px">link 2</a> 
</div>

來源

2010-11-24 22:06:18

感謝Diodeus。這當然是一個可能的解決方案[看這裏]（http://jsfiddle.net/JLpsG/）。我打算把問題留待另外一段時間，看看是否有人可以找到更好的答案，但如果不是，我會接受。 – irishbuzz 2010-11-24 22:34:51

好吧，這當然看起來像是最好的答案。我上次評論中的演示在紅色可點擊區域元素上使用了「padding-bottom」，以便將內部鏈接移動到足夠的區域。在可點擊的區域添加額外的`
`實際上更容易，因爲這也可以實現完美的空間量。再次感謝Diodeus – irishbuzz 2010-11-25 10:45:41

我會使用一個div來包裝你的鏈接。這是你要去的嗎？ http://jsfiddle.net/wcCMC/3/

來源

2010-11-24 22:12:22 stevelove

這將是一個正常的情況，但irishbuzz sed以下注：我意識到這看起來是一個非常凌亂的實施，但我恐怕它已經不在我的手中。由設計（並有很好的理由）我不能簡單地嵌套我的標籤 – Michael 2010-11-24 22:24:00

感謝您花時間回答。除了Michael的評論之外 - 黃色可點擊區域只能覆蓋第二個鏈接的文本，而紅色背景必須填寫剩餘的空間到右側。 – irishbuzz 2010-11-24 22:30:01

您不能嵌套鏈接，但使用絕對定位。

<div id="wrapper"> 
    <a id="bigred" href="...">Big clickable area</a> 
    <a id="yellow" href="...">Yellow background link</a> 
</div>

CSS

#wrapper { 
    position: relative; 
    height: 300px; 
    width: 500px; 
} 

#bigred { 
    background: #ff0000; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 300px; 
    width: 500px; 
} 

#yellow { 
    background: #ffff00 
    position: absolute; 
    top: 30px; 
    left: 30px; 
}

兩個鏈接將被點擊。由於源順序，黃色繪製在紅色頂部。如果您更改訂單，您將需要使用z-index來控制在其上顯示的顯示。

來源

2010-11-24 22:15:06

在這裏，您去工作的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<body> 
<style> 
a {text-decoration:none; background-color:red} 
.clickable_area{display:block;color:#000; padding-bottom: 20px;} 
.container{position: relative;} 
.inner_link{position:absolute; bottom: 0px; background-color:yellow} 
</style> 

    <div class="container"> 
     <a href="#" class="clickable_area"> 
      <span>RED Background and clickable</span><br/> 
      <span>RED Background and clickable</span><br/> 
      <span>RED Background and clickable</span><br/> 
     </a> 
     <a class="inner_link" href="#">Yellow background and it's own link</a> 
    </div> 

</body> 
</html>

來源

2010-11-24 22:17:56 Michael

在超鏈接的區域內顯示鏈接

回答

相關問題