CSS：如何定位內部錨

Question

跨度或DIV我有這種情況：

<li id="liMessagesPanel" > 
    <span id="unreadMessagesCount" class="messagesCount" ></span> 
    <a ID="lnkMessages" class="messages"> 
     <small>Notifications</small> 
    </a> 
</li> 

這將產生以下：

a.messages{ background: url(../img/Footer/iconMail.png) no-repeat center center; border-right: 1px solid #bbb;} 

.messagesCount { 
    background-color: red; 
    border: 1px solid white; 
    border-radius: 16% 16% 16% 16%; 
    color: White; 
    font-family: Verdana; 
    font-size: 8px; 
    font-weight: bold; 
    height: 20px; 
    margin-left: -20px; 
    position: relative; 
    width: 198px; 
    z-index: 2147483647; 
    padding: 0 1px; 
} 

的問題是，由於跨度是不是裏面的錨點元素是不可點擊的，如果我將它放入錨點元素中，則無法識別。

白色郵件信封是圖片，信封圖片右上角的紅色框是範圍。

注：我不能改變結構li - > a - >小，因爲它被jQuery插件使用，跨度是我的一個附加。

Answer 1

，你可以把它放在你的<a>標籤裏面。

注意：我只在<a>標記中添加了href="#"，這表示所有內容都是可點擊的鏈接。

jsfiddle example

HTML：

<li id="liMessagesPanel" > 
    <a ID="lnkMessages" class="messages" href="#"> 
     <small>Notifications</small>    
     <span id="unreadMessagesCount" class="messagesCount" ></span> 
    </a> 
</li> 

的CSS：

a.messages{ a.messages{ background: url(../img/Footer/iconMail.png) no-repeat center center; border-right: 1px solid #bbb;} 

#lnkMessages { 
    position: relative; 
    height: 40px; 
    width: 40px; 
} 

.messages { 
    position: relative; 
    width: 40px; 
} 

.messagesCount { 
    background-color: red; 
    border: 1px solid white; 
    border-radius: 16% 16% 16% 16%; 
    color: White; 
    font-family: Verdana; 
    font-size: 8px; 
    font-weight: bold; 
    height: 20px; 
    width: 18px; 
    padding: 0 1px; 
    /* new: */ 
    left: 20px; 
    position: absolute; 
} 

Answer 2

使用jquery處理跨度上的單擊事件。那麼你可以做你想要什麼都被點擊的跨度時

$("#unreadMessagesCount").click(function(){ 
     //do what ever 


}); 

您可以使用CSS來改變鼠標光標在跨度上，這樣用戶就知道它是點擊

Answer 3

爲什麼不把跨度點擊？

$('liMessagesPanel>span').click(function(e) { 
    e.preventDefault(); 
    $(this).next().click(); 
}); 

假設使用jquery。

Answer 4

新增CSS使光標指針顯示爲您<span>：

.messagesCount { 
    cursor: pointer; 
    ... 
    ... 

然後使<span>單擊處理程序觸發<a> click處理程序：如果您在.messageCount使用position: absolute;

$('.messagesCount').click(function() { 
    $(this).next('a').triggerHandler('click'); 
});