Áreas hipervinculadas anidadas sin elementos de enlace anidados en fuente HTML

Question

Me gustaría tener algo que se vea y se comporte como un hipervínculo dentro de un rectángulo más grande (página completa) que también es hipervínculo. A continuación se presenta la representación ASCII-art de lo que debe ser similar:

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

El rectángulo conjunto (elemento de bloque) externo va a hipervínculo. Dentro de este rectángulo debe haber algo de texto, y al final de este texto debe haber otro enlace.

enlaces Desafortunadamente anidación (elementos a) es ilegal en (X) HTML:

12.2.2 enlaces anidados son ilegales

Enlaces y anclajes definidos por el elemento A no debe ser anidados ; an Un elemento no debe contener ningún otro elemento A.

(desde http://www.w3.org/TR/html401/struct/links.html#h-12.2.2), por lo que la forma más natural de la implementación anterior

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

no es HTML válido. Lo que es aún peor es que algunos navegadores web en algunos casos hacen cumplir este requisito moviendo el elemento de enlace interno justo fuera del elemento de cierre del elemento de enlace exterior. Esto, por supuesto, rompe completamente el diseño.

Así que lo que me gustaría preguntar es cómo llegar a diseño presentado anteriormente utilizando HTML y CSS (pero no JavaScript), pero sin elementos de enlace anidados en fuente HTML. Sería bueno si el comportamiento fuera lo más parecido posible al que tiene elementos de enlace anidados (para los navegadores que no son demasiado estrictos al implementar el estándar HTML).

---

Editar (16-01-2009)

Aclaración: soluciones que utilizan más de dos elementos de enlace son perfectamente aceptables

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

Answer 1

Usted podría intentar algo como esto:

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>

Answer 2

Lo que he hecho en el pasado es usar Javascript para adjuntar la funcionalidad adecuada al div (suponiendo que sea el elemento padre) para que cuando se haga clic en él, se ejecute window.location abriendo el atributo .href del enlace secundario.

Algo como esto quizás.

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

Answer 3

Quizás esto funcione?

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> 

Answer 4

Sólo tiene que colocar en el controlador de eventos onclick en el elemento exterior que cuando las llamadas "click en window.location = 'yourURLhere';"

Puede agregar un atributo de estilo - "cursor: puntero" para obtener el cursor de mano al pasar el mouse.

También podría tener un bloque de código css hover para obtener los cambios de color.

EDIT: acabo de dar cuenta sin Javascript, por lo que en ese caso, mantener la 'una' etiqueta y simplemente definir un estilo para que en el CSS, de esa manera se puede dar altura, anchura, etc.

Answer 5

Un flotador con márgenes negativos debería funcionar tan bien.

Probado (en IE6 solamente):

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

Te das cuenta del gran potencial de confusión del usuario.