如何使图像可点击而不是整个div？

How do I go about making just an image clickable and not the entire div that the clickable image is inside of? In this case, the first image, .home, an anchor, and the div that contains it, .nav, is clickable. There's a second image that doesn't have an anchor, so it's ok. How do I make just the first image inside the anchor clickable but not the div that contains them?

我如何才能使图像可点击而不是可点击图像所在的整个div？在这种情况下，第一个图像，.home，一个锚点和包含它的div（.nav）是可点击的。还有第二个没有锚的图像，所以没关系。如何使锚点内的第一个图像可点击而不是包含它们的div？

    img.home {

      display: block;

      margin-left: auto;

      margin-right: auto;

      margin-top: 25px;

      -webkit-transition-duration: 0.8s;

      -moz-transition-duration: 0.8s;

      transform-duration: 0.8s;

    }

    img.home:hover {

      -webkit-transform: rotate(360deg);

      -moz-transform: rotate(360deg);

      transform: rotate(360deg);

    }

    img.catfalogo {

      position: absolute;

      display: block;

      margin: 0 auto;

      top: 155px;

      left: 50%;

      z-index: 1;

      text-align: center;

      -webkit-transform: translate(-50%, -50%);

      transform: translate(-50%, -50%);

    }

    .nav {

      position: fixed;

      height: 212px;

      width: 100%;

      background: #C9D4E7;

      z-index: 2;

      top: 0px;

    }

<div class="nav">
  <p>Click to the right or left of the img.home and it will be clickable. I don't want that. I only want img.home (spinning shield) to be clickable.</p>
  <a href="informationindex.html">
    <img class="home" src="http://i.ebayimg.com/images/a/T2eC16ZHJHQE9nzEy9TZBQgKMjrbTw~~/s-l64.jpg" alt="home" width="67px" height="67px">
  </a>
  <img class="catfalogo" src="https://vgboxart.com/resources/logo/2250_captain-america-the-first-avenger-prev.png" alt="catfa logo" height="90px">
</div>

img In this image, the darker area is what is currently clickable. I only want the circular image (Capt. America's shield) to be clickable. Not the entire space around it.

img在此图像中，较暗的区域是当前可点击的区域。我只想要圆形图像（Capt.America的盾牌）可点击。不是它周围的整个空间。

Thank you!

谢谢！

1 个解决方案

#1

-3

The first image is clickable. The div is not clickable. Assign pointer-events: none to any elements' style (inline, external, etc.) and it won't be clickable. The default is pointer-events: auto;

第一张图片是可点击的。 div不可点击。将指针事件：none分配给任何元素的样式（内联，外部等），并且它不可单击。默认是指针事件：auto;

img.home {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s;
  pointer-events: auto;
}
img.home:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transform: rotate(360deg);
}
img.catfalogo {
  position: absolute;
  display: block;
  margin: 0 auto;
  top: 155px;
  left: 50%;
  z-index: 1;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.nav {
  position: fixed;
  height: 212px;
  width: 100%;
  background: #C9D4E7;
  z-index: 2;
  top: 0px;
  pointer-events: none;
}

<div class="nav">
  <a href="informationindex.html">
    <img class="home" src="http://i.ebayimg.com/images/a/T2eC16ZHJHQE9nzEy9TZBQgKMjrbTw~~/s-l64.jpg" alt="home" width="67px" height="67px">
  </a>
  <img class="catfalogo" src="https://vgboxart.com/resources/logo/2250_captain-america-the-first-avenger-prev.png" alt="catfa logo" height="90px">
</div>

EDIT: Although the original demo was adequate to convey instructions to the OP, I have edited it because it seems that a certain member is going at great lengths to bury this question.

编辑：虽然最初的演示足以向OP传达指令，但我编辑了它，因为似乎某位成员正在竭尽全力埋葬这个问题。

#1

-3