Can I have a non-clickable section of a link?

Question

Hopefully simple enough, in the below example I want the blue section of the link to be clickable (as a link) but the red section not to be. I am planning to subscribe to the red section's onclick event after with Javascript.

Spent an hour on this and getting nowhere! Does anybody 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 the inner div having a higher z-index and no pointer events would do it, but doesn't seem to work.

Anybody have any ideas?

Since you're adding JS to the red section anyway, just add `event.preventDefault()` to your listener? — Jonathan, May 12 '15 at 10:19
@Jonathan nice suggestion, going for the pure html/css answer though, cheers — JMK, May 12 '15 at 12:55

score 7 · Accepted Answer · answered May 12 '15 at 10:25

7

Instead of hacking the html like that, which is a 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>

answered May 12 '15 at 10:25

Vlad

902
4
14

1

This should be useful. HTML5 doesn't mind really, but it's still a bad practice in my opinion. http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – Vlad May 12 '15 at 10:36

score 4 · Answer 2 · answered May 12 '15 at 10:24

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>

Can I have a non-clickable section of a link?

2 Answers2