在HTML源代碼中沒有嵌套鏈接元素的嵌套超鏈接區域

我想要在超大鏈接內部看起來和表現爲超鏈接的東西。下面是它應該看起來像ASCII的藝術表示：在HTML源代碼中沒有嵌套鏈接元素的嵌套超鏈接區域

 
|-------------------------------------------| 
| Some text [_link_]       | 
|-------------------------------------------|

整個外部矩形（塊元素）是超鏈接。在這個矩形裏面應該有一些文本，並且在這個文本的最後應該有另一個鏈接。

不幸的是嵌套鏈接（A元素）是在（X）HTML非法：

12.2.2嵌套鏈接是非法

鏈接和錨由A元素定義不能嵌套; A元素不得包含任何其他A元素。

（從http://www.w3.org/TR/html401/struct/links.html#h-12.2.2），所以實現上述

<a href="xxx" style="display: block"> 
    Some text 
    <a href="yyy">link</a> 
</a>

的最自然的方式是無效的HTML。更糟糕的是，有些瀏覽器在某些情況下通過將內部鏈接元素移動到外部鏈接元素的關閉元素之外來強制執行此要求。這當然完全打破布局。

所以想什麼，我要問的是如何在佈局以上使用HTML和CSS（但沒有的JavaScript）來呈現，但不嵌套鏈接元素在HTML源代碼。如果行爲儘可能接近具有嵌套鏈接元素的行爲（對於實現HTML標準的瀏覽器不太嚴格），那將會很好。

編輯（16-01-2009）

澄清：解決方案，使用兩個以上的環節要素是完全可以接受的

<a href="xxx" ...>Some text</a> 
<a href="yyy" ...>Link</a> 
<a href="xxx" ...>& nbsp;</a> 
...

來源

2009-01-16 Jakub Narębski

有幾個我能想到的解決方案，但我認爲他們都使用JavaScript。我有興趣看看是否有人可以用純CSS + HTML – 2009-01-16 00:28:21

做一個......你知道從可訪問性的角度來看聽起來有多糟糕，是嗎？你不應該把鏈接*下一個*放在另一個裏面，更不用說在裏面了！ :-) – 2009-01-16 00:46:10

另一方面，一些可用性/可訪問性提示表明類菜單鏈接應該跨越整個寬度，因爲不需要查找和單擊文本。 – 2009-01-20 15:52:25

你可以嘗試是這樣的：

div.a { 
 
    position: relative; 
 
    background-color: #F88; 
 
    z-index: 0; 
 
} 
 
a.b { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
a.b:hover { 
 
    background-color: #8F8; 
 
} 
 
a.c { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 
a.c:hover { 
 
    background-color: #88F; 
 
} 
 
a.c span { 
 
    display: none; 
 
}

<div class="a"> 
 
    foo 
 
    <a href="bar" class="b">bar</a> 
 
    <a href="foo" class="c"><span>baz</span></a> 
 
</div>

來源

2009-01-16 00:40:42 Gumbo

我在過去所做的那樣是使用Javascript將正確的功能附加到div（假設它是父元素），以便當它被單擊時，window.location會打開子鏈接的.href屬性。

也許這樣的事情。

// jQuery Code 
$(".parentDivLink").click(function(){ 
    window.location = $(this).find("a.mainLink").attr("href"); 
}); 

<div class="parentDivLink"> 
    <a href="http://www.google.com" title="Google" class="mainLink">Click Me</a> 
</div>

來源

2009-01-16 00:27:07 Sampson

也許這會工作？

div.parentBox { 
    position:relative; 
    height:100px; 
} 
    a.someLink { 
    position:absolute; 
    top:0; 
    left:0; 
    height:100px; 
    } 

// Now just position the two spans 

<div class="parentBox"> 
    <span class="someText">Some Text</span> 
    <a href="#" class="someLink"> 
    <span class="linkText">Link Text</span> 
    </a> 
</div>

來源

2009-01-16 00:32:07 Sampson

只需將onclick事件處理程序放在外部元素上，當它被點擊時調用「window.location ='yourURLhere';」

您可以添加一個樣式屬性 - 「光標：指針」來獲取鼠標懸停時的手形光標。

你也可以有一個CSS懸停代碼塊來獲取顏色的變化。

編輯：剛剛意識到沒有JavaScript，因此在這種情況下，保持的一個標籤，只是在CSS定義的風格吧，這樣你可以給它的高度，寬度等

來源

2009-01-16 00:34:18 Jobo

一個浮點切緣陰性應正常工作。

（IE6中只）測試：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title>Link within link</title> 
<style type="text/css"> 
.Parent { 
width: 500px; 
background-color: yellow; 
} 
.sub { 
float: left; 
margin-left: -300px; 
} 
.foo { 
display:block; 
float: left; 
text-decoration: none; 
} 
</style> 
</head> 
<body> 
<a href="foo" Class="foo"><div class="Parent">foo </div></a> 
<div class="sub"><a href="bar">Link text</a></div> 
</body> 
</html>

你一定要明白用戶混淆的巨大潛力。

來源

2009-01-16 15:14:30 Traingamer

在HTML源代碼中沒有嵌套鏈接元素的嵌套超鏈接區域

回答

相關問題