在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源代码中没有嵌套链接元素的嵌套超链接区域

回答

相关问题