Html Question posted in
Some basic documentation can be found here.

Html – Is it possible to ignore the link under the image with pure CSS?

This is my HTML (simplified) and CSS:

div {
  border: 2px solid red;
  width: 200px;
  height: 200px;
}

img {
  z-index: 0;
}

#plate {
  position: absolute;
  left: 20px;
  top: 30px;
  opacity: 0.7;
  z-index: 10;
}
<div>
  <a href="https://google.com">
    <img src="https://placehold.it/200/333333" />
    <img id="plate" src="https://placehold.it/100/999999" />
  </a>

</div>

The result can be seen here:

https://jsfiddle.net/fcsyrz2h/

How to change the CSS code so that id="plate" rectangle is not clickable (so that we don’t go to the href of <a>).

PS. The rest area of <a> other than the <img id="plate"> should be clickable.

P.P.S The question improved.

Tags:

3

Answers


  1. 0

    If you move the second id="plate" image that you don’t want to be clickable outside of the anchor tag, it should work.

    div {
  border: 2px solid red;
  width: 200px;
  height: 200px;
}
img {
  z-index: 0;
}
#plate {
  position: absolute;
  left: 20px;
  top: 30px;
  opacity: 0.7;
} 
    <div>
  <a href="https://google.com">
    <img src="https://placehold.it/200/333333" />
  </a>
  <img id="plate" src="https://placehold.it/100/999999" />
</div>
    Login or Signup to reply.
  2. 0

    Based on this answer, you can add pointer-events: none;

    img {
  z-index: 0;
  pointer-events: none
}
    Login or Signup to reply.
  3. 0

    I understand that you want to achieve this effect via CSS presentation.

    But it is a category of problem which can only be achieved via HTML structure.

    i.e. you need to think about structure and about which elements should be parents, which should be children and which should be siblings.

    How to change the CSS code so that id="plate" rectangle is not clickable (so that we don’t go to the href of ).
    […] The rest area of <a> other than the <img id="plate"> should be clickable.

    You can punch a hole in the <a> element.

    But if you do, then #plate will no longer be there.

    Because #plate is a child of the <a> – and you’ve just punched a #plate-sized hole right out of the <a>.

    Example:

    div {
  position: relative;
  width: 200px;
  height: 200px;
  border: 2px solid red;
}

#plate {
  position: absolute;
  left: 20px;
  top: 30px;
  opacity: 0.4;
}

a {
  position: absolute;
  inset: 0;
  clip-path: path('M 0 0 L 0 204 L 204 204 L 204 0 L 0 0 M 22 32 L 122 32 L 122 132 L 22 132 L 22 32 Z');
}
    <div>
  <a href="https://example.com/">
    <img src="https://placehold.it/200/333333" />
    <img id="plate" src="https://placehold.it/100/999999" />
  </a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search