刪除溢出的可點擊區域

我有一個具有一定高度的導航欄和溢出的標誌。這個標識當然是可點擊的，但這意味着溢出的部分也是可點擊的。刪除溢出的可點擊區域

是否可以使徽標溢出，但不是可點擊區域？

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

刪除溢出的可點擊區域

回答

相關問題