CODEWITHSUNDEEP
htmlcsshref
Stefan
Stefan

Reputation: 1041

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?

Upvotes: 1

Views: 108

Answers (2)

Ricky Dam
Ricky Dam

Reputation: 1895

I believe this is what you want.

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

Upvotes: 0

master Nixe
master Nixe

Reputation: 180

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>

Upvotes: 5

Related Questions