CSS：如何在锚点内定位span或div

Question

我遇到这种情况：

<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 - ＆gt; a - ＆gt;因为它是由jquery插件使用的，所以跨度是我的一个补充。

Answer 1

如果您在position: absolute;上使用.messageCount，则可以将其放在<a>标记内。

注意：我只在href="#"标记中添加了<a>，以便显示所有内容都是可点击的链接。

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>点击处理程序：

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