是否可以使用CSS更改鏈接的可點擊區域？

我有一個代碼塊看起來像這樣：是否可以使用CSS更改鏈接的可點擊區域？

<p class="cont"> 
<a href="otherpage.php" class="link"><img src="test.jpg" alt="" width="100" height="100"/></a> 
</p>

和我有一些CSS是這樣的：

.cont { 
    width:200px; 
    height:200px; 
} 
.cont:hover { 
    background-color:#CCC; 
}

我的問題是，如果有可能改變鏈接的大小區域，因此它佔據了整個區域，因此使其可以點擊 - 不僅僅是圖像。我已經嘗試給寬度和高度的.link類和使用顯示：塊，但它沒有辦法。它甚至有可能嗎？

來源

2011-02-16 Alex Berg

相關http://stackoverflow.com/questions/1227618/big-clickable-areas-on-a-web-page – 2011-02-16 09:55:36

參見：http://jsfiddle.net/sSGJV/
或用200px尺寸：http://jsfiddle.net/sSGJV/1/

HTML：

<a href="http://www.google.com/"> 
    <img src="http://www.google.com/images/logos/ps_logo2.png" /> 
    <br /> 
    Click to go to the Googles. 
</a>

CSS：

a { 
    display: block; 
    border: 3px dashed #000; 
    text-align: center 
}

如您所見，您可以單擊<a>標記中的任意位置。

來源

2011-02-16 10:03:52 thirtydot

總之是的，有一個偉大的博客文章只是這個問題，可以在這裏找到：http://csswizardry.com/2011/01/maximising-hit-area-for-usability/

來源

2011-02-16 09:54:39 AlanG

這工作正常，如果它只是文本。問題出在裏面有圖像。 – 2011-02-16 09:59:00

– AlanG 2011-02-16 10:01:43

我有什麼似乎是類似的問題，並通過添加樣式z-index：3來解決它的包裝div。

來源

2012-02-25 22:07:10 Jack

是否可以使用CSS更改鏈接的可點擊區域？

回答

相關問題