Search code examples
htmlcsshref

Html don't go to A href location when clicked on another element above it

I was wondering if its possible to prevent my div from going to the href in my A tag when pressed. My div is current floating over my A tag with position: absolute.

Jsfiddle with my problem: https://jsfiddle.net/ac80u7bd/

I need the css style: position: relative in my div to prevent my button from sticking to the top left of the page. I'm not sure if this is causing the problem.

My html looks like this:

<div class="image col-md-6">
  <a href="https://google.com">
    <img width="500" height="300" src="http://i.imgur.com/uR2o8pb.jpg">
  </a>
  <div class="edit-image">&middot;&middot;&middot;</div>
</div>

Css:

.image {
    padding: 8px;
    position: relative;
}

.image .edit-image{
    background-color: red;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 15px;
    left: 15px;
    pointer-events: none;
    z-index: 100;
}

Is it possible to not follow the href when clicking on the <div class="edit-image"> element?

Solution

  • Remove the pointer-events:none; and voila!

    .image {
  padding: 8px;
  position: relative;
}

.image .edit-image {
  background-color: red;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 15px;
  left: 15px;
  z-index: 100;
}
    <div class="image col-md-6">
  <a href="https://google.com">
    <img width="500" height="300" src="http://i.imgur.com/uR2o8pb.jpg">
  </a>
  <div class="edit-image">&middot;&middot;&middot;</div>
</div>