html - 移除溢出的可点击区域

Question

我有一个具有一定高度的导航栏和一个溢出的 Logo 。这个标志当然是可点击的，但这意味着溢出的部分也是可点击的。

是否可以让logo溢出，但点击区域不溢出？

HTML

<nav>
  <a href="#">
    <div class="logo">
      <img src="http://i.imgur.com/h4bUdrZ.png" />
    </div>
  </a>
</nav>

CSS

body, html {
  padding: 0;
  margin: 0;
}

nav {
  height: 100px;
  background: blue;
  position: relative;
} 

.logo {
  position: absolute;
  top: -36px;
  left: -39px;
}

JSFIDDLE

Answer 1

是这样的吗？

body,
html {
  padding: 0;
  margin: 0;
}

nav {
  height: 100px;
  background: blue;
  position: relative;
}

a {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.logo {
  position: absolute;
  top: -36px;
  left: -39px;
  pointer-events: none;
}

<nav>
  <a href="#">
    <div class="logo">
      <img src="http://i.imgur.com/h4bUdrZ.png" />
    </div>
  </a>
</nav>