3

I have a div. I want it to link somewhere when you click on it, but I also want to put other links inside it, so when you click on the other links you're redirected to one place, but if you click anywhere else you're redirected somewhere else.

Here's a simple example. As it is, the "interior" link is located outside of the "exterior" link, no matter what I do.

<a href="#" class="exterior">
  <a href="#">interior</a>
</a>

fiddle: https://jsfiddle.net/p4ugexf4/

Joe Morano
  • 1,715
  • 10
  • 50
  • 114

6 Answers6

6

You can use the javascript onclick event on the parent element of the link(s):

.exterior {
  display: block;
  width:100px;
  height:100px;
  border: 1px black solid;
}
<div onclick="document.location.href='https://example.com';return true;" class="exterior">
    <a href="https://stackoverflow.com">interior</a>
</div>

I don't recommend to use <a> in <a> element. Using <a> in <a> isn't valid. You can check the following document on the W3C validator:

<!DOCTYPE html>
<html>
    <head>
        <title>test link in link</title>
    </head>
    <body>
        <a href="#" class="test1">
            <a href="#" class="test2">test</a>
        </a>
    </body>
</html>

You can also use two different <a> elements (without using javascript - only CSS solution):

div {
  position:relative;
  border:1px solid red;
  height:200px;
  width:200px;
}
div a.ext {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:0;
}
div a.int {
  position:relative;
  z-index:999;
}
<div>
  <a class="ext" href="https://example.com"></a>
  <a class="int" href="https://stackoverflow.com">test</a>
</div>
Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
1

A simple, practical, non-javascript solution:

Break up your main link into smaller chunks - something like:

<div>
  <a href="#" class="exterior">First part of exterior link</a>
  <a href="#">interior</a> 
  <a href="#" class="exterior">Second part of exterior link etc</a>
</div>
Danield
  • 121,619
  • 37
  • 226
  • 255
0

You can use absolute positioning

.exterior {
  display: block;
  width:100px;
  height:100px;
  border: 1px black solid;
  position: relative;
}
.interior {
  position: absolute;
  top: 20px;
  left: 20px;
}
<a href="bla" class="exterior">
  <a class="interior" href="blabla">Interior</a>
</a>
Gerard
  • 15,418
  • 5
  • 30
  • 52
0
$(".exterior a").click(function(e){
    alert('a clicked but div not triggered');
    e.stopPropagation();
});

$(".exterior").click(function(e){
    alert("div clicked but not a");
})

<div href = "#" class="exterior">
  <a href="https://stackoverflow.com/questions/tagged/css">interior</a>
</div>

.exterior{
width: 500px;
height: 100px;
background-color: red;
}

I used stop propagation on a element to prevent it from triggering the click on the div. And i used div as wrapper so you would have to put a windows.location if you want to redirect to an url inside the click function.

I'm not sure how you can achieve this with simply html and css. So i would suggest using jquery.

user5014677
  • 694
  • 6
  • 22
0

.exterior {
  display: block;
  width:100px;
  height:100px;
  border: 1px black solid;
}
<a href="http://bing.com" class="exterior">
  <object><a href="http://example.com">Interior</a></object>
</a>

demo

bhv
  • 5,188
  • 3
  • 35
  • 44
0

You could use positioning to display a link within anoter link/container.

I have created an example, it's not perfect but will give you an idea.

https://codepen.io/MartynMc/pen/gRyqXL

HTML:

<div class="container">
  <a class="link1" href="link1.com"></a>
  <a class="link2" href="link2.com">link2</a> 
</div>

CSS:

.container {
  width: 250px;
  height: 250px;
  border: 2px solid;
  position: relative;
}
.link1 {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}
.link2 {
  display: block;
  top: 75px;
  left: 50px;
  font-size: 24pt;
  position: absolute;
  width: 150px;
  height: 50px;
  border: 2px solid red;
  text-align: center;
  line-height: 50px;
}
MartynMc
  • 88
  • 1
  • 9