Question

如何制作可点击的图像而不是可点击图像所在的整个div？在这种情况下，第一个图像.home，一个锚点以及包含它的div .nav是可点击的。第二张图片没有锚点，所以没关系。如何使锚点内的第一个图像可点击，而不是包含它们的div？

＆＃13;

    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;

    }

＆＃13;

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

＆＃13;

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

谢谢！

Answer 1

第一张图片是可点击的。 div不可点击。将func fizzBuzz(n: Int) -> String { let result: String switch n { case let n where n % 3 == 0 && n % 5 == 0: result = "FizzBuzz" case let n where n % 3 == 0: result = "Fizz" case let n where n % 5 == 0: result = "Buzz" default: result = "none" } print("n:", n, "result:", result) return result }分配给任何元素的样式（内联，外部等），并且它不可单击。默认值为pointer-events: none

pointer-events: 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;
}

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

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

1 个答案: