删除溢出的可点击区域

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

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

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

来源

2016-05-03 Rvervuurt

如果你给一个标签图像的话就会产生问题... –

你必须选项，以使图像小的高度和宽度不会包含任何额外的空间 –

请解释一下@HarshSanghani？我需要现在的图像，但我不希望导航栏外部的区域可点击。 – Rvervuurt

像这样的事情？

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>

来源

2016-05-03 13:15:46 NiZa

当我把'a'上的'100％'改为'100px '，它的工作。谢谢！ – Rvervuurt

不客气！ :) – NiZa

只要移动徽标你的链接之外，并把该链接头的其余部分：

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>

来源

2016-05-03 13:16:01 Justinas

不要将整个div内a。

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

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

请参见下面的例子：

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

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

来源

2016-05-03 13:16:28 beerwin

在HTML 5中，以我的方式包装它是完全合法的。 – Rvervuurt

更正了我的答案。 – beerwin

更改点点你的结构。

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

来源

2016-05-03 13:18:32

什么这样的事情？

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

来源

2016-05-03 13:31:30 stackunderflow

删除溢出的可点击区域

回答

相关问题