代码之家 › 专栏 › 技术社区 › Jakub NarÄbski adamtaub

HTML源代码中没有嵌套链接元素的嵌套超链接区域

css html

Jakub NarÄbski adamtaub · 技术社区 · 17 年前

我希望在更大的矩形(整页宽)内有一些外观和行为类似于超链接的东西,它也是超链接。下面是它应该是什么样子的ASCII艺术表示:

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

整个外部矩形(块元素)是超链接。在这个矩形内应该有一些文本,并且在文本的末尾应该有另一个链接。

不幸的是,(x)HTML中嵌套链接(a元素)是非法的:

12.2.2嵌套链接是非法的

元素定义的链接和锚定不能嵌套; 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标准方面不太严格的浏览器),那就太好了。

编辑(2009年1月16日)

澄清: 使用两个以上链接元素的解决方案完全可以接受。

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

5 回复 | 直到 9 年前

tbodt 9 年前

你可以尝试这样的方法:

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>

Sampson 17 年前

也许这会奏效?

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>

Sampson 17 年前

我过去所做的是使用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>

Jobo 17 年前

只需将onclick事件处理程序放在外部元素上,单击该元素时调用“window.location='yourlhere';”

您可以添加一个样式属性-“cursor:pointer”以在鼠标悬停时获取手形光标。

你也可以有一个CSS悬停代码块来获取颜色变化。

编辑:刚刚意识到没有javascript,所以在这种情况下,保留“a”标记,并在CSS中为它定义一个样式,这样您就可以给它提供高度、宽度等。

Traingamer 17 年前

带负利润的浮动也应该有效。

测试(仅在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>

您确实认识到了用户混淆的巨大潜力。