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

我有这样的情况：

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

问题是，因为跨度不在锚元素内，所以它不可单击，如果我将其放在锚元素内，它将无法识别

白色信封是图像，信封图像右上角的红色框是跨度

---

注意：我无法更改结构li->a->small，因为它由jquery插件使用，span是我添加的。

使用jquery处理span上的单击事件。然后，当单击跨度时，您可以随心所欲地执行任何操作

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


 });

---

您可以使用css在跨度上更改鼠标上的光标，以便用户知道它是可单击的

使用jquery处理跨度上的单击事件。然后，当单击跨度时，您可以随心所欲地执行任何操作

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


 });

---

您可以使用css将鼠标上的光标更改为跨距的一部分，以便用户知道它是可单击的

为什么不使跨距可单击

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

---

假设使用jquery。

为什么不让span可点击

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

---

假设使用jquery。

添加css以使光标指针显示在您的

中：

然后使

单击处理程序触发

单击处理程序：

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

---

添加css以使光标指针显示在您的

：

然后使

单击处理程序触发

单击处理程序：

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

---

如果使用

位置：绝对

在

.messageCount

上，您可以将其放入

Html:

如果使用
位置：绝对
在
.messageCount
上，您可以将其放入

Html:

谢谢，你的解决方案是最好的。谢谢，你的解决方案是最好的。
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;
}