jquery - 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 -> a -> small，因为它由 jquery 插件使用，span 是我的补充。

Answer 1

如果你使用position: absolute;on .messageCount，你可以把它放在你的<a>标签里面。

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

jsfiddle 示例

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');
});