Вложенные гиперссылки без вложенных элементов ссылки в HTML-источнике

Я хотел бы иметь что-то, что выглядит и ведет себя как гиперссылка внутри большего прямоугольника (полная страница), которая также является гиперссылкой. Ниже представлено ASCII-представление, как оно должно выглядеть:

|-------------------------------------------|
| 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>
...

Ответы

Ответ 1

Вы можете попробовать что-то вроде этого:

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>

Ответ 2

Возможно, это сработает?

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>

Ответ 3

То, что я делал в прошлом, - это использовать 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>

Ответ 4

Просто поместите обработчик события onclick на внешний элемент, который при нажатии вызывает "window.location = 'yourURLhere"; "

Вы можете добавить атрибут стиля - "cursor: pointer", чтобы получить курсор мыши при наведении мыши.

У вас также может быть блок кода hover css для изменения цвета.

EDIT: просто не реализовано javascript, поэтому в этом случае сохраните тег 'a' и просто определите стиль для него в css, таким образом вы можете присвоить ему высоту, ширину и т.д.

Ответ 5

Поплавок с отрицательными полями также должен работать.

Протестировано (только в 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>

Вы осознаете большой потенциал для путаницы пользователей.