Can I have a link without a link?
Hopefully simple enough, in the example below, I want the blue section of the link to be clickable (like a link), but not the red section. I am planning to subscribe to the red onclick section after Javascript.
Spent an hour on this and didn't go anywhere! Does anyone know how to do this?
.outer{
width:300px;
height:50px;
background-color:blue;
position:relative;
display:block;
color:white;
z-index:1;
}
.inner{
width:150px;
height:25px;
background-color:red;
top:0;
right:0;
position:absolute;
pointer-events:none;
z-index:2;
}
<a href="http://google.co.uk" class="outer">
Clickable
<div class="inner">
Not clickable
</div>
</a>
I thought an inner div having a higher z-index and no pointing events would do this, but doesn't seem to work.
Does anyone have any idea?
+3
source to share
2 answers
Instead of hacking the html like this, this is very bad practice. Why not:
.outer {
background-color: red;
display: inline-block;
}
.inner {
background-color: blue;
width: 300px;
display: inline-block;
}
span {
display: inline-block;
}
<div class="inner">
<a href="http://google.co.uk" class="outer">Clickable</a>
<span>Not clickable</span>
</div>
+7
source to share
use preventDefault method.
$('.inner').click(function(e){
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a href="http://google.co.uk" class="outer">
Clickable
<div class="inner">
Not clickable
</div>
</a>
+4
source to share