Nested hyperlinked areas without nested link elements in HTML source

后端未结

关注

 5  1974

I\'d like to have something that looks and behaves as hyperlink inside larger rectangle (full page wide) which is also hyperlink. Below there is ASCII-art representation of what

相关标签:

5条回答

太阳男子

2021-02-02 16:43

Perhaps this would work?

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>

0 讨论(0)

情歌与酒

2021-02-02 16:47
What I have done in the past is use Javascript to attach the proper functionality to the div (assuming that is the parent element) so that when it is clicked, window.location is ran opening the .href attribute of the child link.

Something like this perhaps.
```
// 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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

野趣味

2021-02-02 16:48

You could try something like this:

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>

0 讨论(0)

忘掉有多难

2021-02-02 16:58

A float with negative margins should work as well.

Tested (in IE6 only):

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

You do realize the great potential for user confusion.

0 讨论(0)

孤街浪徒

2021-02-02 17:06

Just place on onclick event handler on the outer element which when clicked calls "window.location ='yourURLhere';"

You could add a style attribute - "cursor:pointer" to get the hand cursor when mouse over.

You could also have a css hover code block to get the colour changes.

EDIT: just realised no javascript, so in that case, keep the 'a' tag and simply define a style for it in css, that way you can give it height, width, etc.

0 讨论(0)
发布评论:

提交评论
- 加载中...