Question

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

是否可以使徽标溢出，而不是可点击区域？

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

这样的东西？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需在链接外移动徽标，然后将该链接放在标题的其余部分：

body,
html {
  padding: 0;
  margin: 0;
}
nav {
  height: 100px;
  background: blue;
  position: relative;
}
.logo {
  position: absolute;
  top: -36px;
  left: -39px;
}
a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: inline-block;
}

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

Answer 3

不要将div放在a内。

将链接放在图像后面，给它绝对定位并仔细设置位置和大小。

其他答案使整个标题可点击。如果不需要，请使用此解决方案。您可能需要调整可点击区域的宽度。

请参阅以下示例：

＆＃13;

body, html {
  padding: 0;
  margin: 0;
}

nav {
  height: 100px;
  background: blue;
  position: relative;
} 

.logo {
  position: absolute;
  top: -36px;
  left: -39px;
}

a.clickable-logo {
  position: absolute;
  display: inline-block;
  left: 36px;
  top: 36px;
  width: 600px;
  height: 100px;
}

＆＃13;

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

＆＃13;

Answer 4

改变你的一点结构。

将<a>置于独立状态，并使用以下css传递其中的链接。

<强> HTML

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

<强> CSS

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

nav {
  height: 100px;
  background: blue;
  position: relative;
} 
nav a{
  position: relative;
    display: block;
    height: 100%;
    z-index: 1;
} 

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

示例：https://jsfiddle.net/67s4ajqf/3/

Answer 5

这样的事情怎么样？

<强> HTML

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

<强> CSS

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

nav {
  height: 100px;
  background: blue;
  position: relative;
} 
.clear {
  height: 100px;
  background: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

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

删除溢出的可点击区域

5 个答案: