CSS刪除鏈接在href來自父圖像的間隙

我有一個圖像，有一個鏈接。然後我有一個圓形的子彈圖像對齊內聯，放置在父圖像鏈接。當用戶嘗試點擊子彈時，有時他們可能會錯過小距離並且偶然點擊圖像鏈接（而不是子彈）。因此，我希望那些介於子彈點之間的差距完全沒有鏈接，但他們仍然有來自背景的鏈接。CSS刪除鏈接在href來自父圖像的間隙

代碼爲基礎，這樣的：

<ul class="bullets2" style="position:relative;bottom:25px;left:50px"> 
    <li><a href="javascript:alert('CLICK BULLET')"></a></li> 
    <li><a href="javascript:alert('CLICK BULLET')"></a></li> 
    ... 
</ul>

還有CSS樣式，你可以看一下代碼示例。

下面的圖片展示了我想實現的目標。 enter image description here

而這裏的jsfiddle：http://jsfiddle.net/RCkFL/

UPDATE

無解的工作，所以我用<map>結合<area>創建一個多邊形熱點解決我的問題。感謝所有的答案，無論如何，我希望有人仍然會提出解決我原來的問題，因爲CSS方法更好。謝謝。

來源

2012-11-08 Davit

是..我編輯我的問題與「不那麼有用」的解決方案。如果有人會提出css解決方案，我會非常感激。謝謝。 – Davit

我將放置在圖像上子彈，並會給該div的填充（更多的「非HREF」 -space。

沒有嘗試，但應該工作。

來源

2012-11-08 14:46:23 yacon

如果添加在您的李標籤一些填充，圍繞子彈把這個包應該阻止下面的圖片鏈接。

CSS

ul.bullets2 
{ 
    width:400px; 
    padding: 0px; 
    margin: 0; 
    position: relative; 
    bottom:40px; 
    left:50px 
} 

ul.bullets2 li { 
    float: left; 
    padding: 10px; 
} 

ul.bullets2 li a { 
    background: url(http://s16.postimage.org/46ceaxz2p/bullet.png) no-repeat; 
    display: block; 
    width:16px; 
    height:16px; 
} 

ul.bullets2 li a:hover, ul.bullets2 li a.selected 
{ 
    background: url(http://s16.postimage.org/46ceaxz2p/bullet.png) no-repeat; 
    width:16px; 
    height:16px; 
}

DEMO

來源

2012-11-08 14:48:04 3dgoo

類似於發佈者3dgoo，但稍有不同）

添加填充到的圖像，將它們設置爲塊，並設置「禮」內聯 - 嵌段 - 會有在1個字符的空間在不觸發圖片點擊的項目之間。

ul.bullets2 
{ 
    width:400px; 
    padding: 0px; 
    margin: 0; 
} 

ul.bullets2 li{ 
    display:inline-block; 
} 

ul.bullets2 li a { 
    display:block;    
    background: url(http://s16.postimage.org/46ceaxz2p/bullet.png) no-repeat top center; 
    padding:3px; 
    width:16px; 
    height:16px; 
} 

ul.bullets2 li a:hover, ul.bullets2 li a.selected 
{ 
    background: url(http://s16.postimage.org/46ceaxz2p/bullet.png) no-repeat center middle; 
    width:16px; 
    height:16px; 
}

的jsfiddle：http://jsfiddle.net/ev5q8/

來源

2012-11-08 14:51:08 chrisgonzalez

從用戶體驗角度來看，這爲用戶提供了更大的點擊空間。微小的按鈕令人沮喪！ :) – chrisgonzalez

ul.bullets2 { 

    width: 400px; 
    padding: 0px; 
    margin: 0; 
    display: inline; 

} 

ul.bullets2 li a { 

    background: url('http://s16.postimage.org/46ceaxz2p/bullet.png') no-repeat; 
    padding: 0px 8px; 

}

來源

2012-11-20 08:58:26 Nandhakumar

CSS刪除鏈接在href來自父圖像的間隙

回答

相關問題