如何在自定义<li>项目符号上检测鼠标悬停？</li>

Question

我有一个包含自定义图片项目符号的列表。如果用户将鼠标悬停在子弹图像上，我想要：

• 显示标题属性，或
• 显示助手文字

如果需要，我可以使用基于JavaScript的解决方案

我的来源如下：

<style>
  li.important { list-style-image: url(important.png) }
</style>
<ul>
  <li class="important">Test</li>
  <li>Test</li>
</ul>

修改：我希望鼠标悬停/标题文字仅显示在项目符号上，但不显示在<li>的主体上。

Answer 1

据我所知，无法取回项目符号的鼠标悬停而非<li>项目。

另一种选择（有点脏，但嘿）是将你的“子弹”作为标记的一部分。

<li><img src="important.gif" alt="Something" title="Hey! Useful info!" /> Test</li>

Answer 2

jQuery('li.important').mouseover();

Answer 3

我没有看到你提到的第一个要点的问题：

http://jsfiddle.net/xrGqk/2/

在Chrome，FF，IE7中为自定义图片LI设置了标题属性。将鼠标悬停在LI上的图像上，并在所有三个浏览器中弹出标题。

onmouseover似乎也可以正常工作：

http://jsfiddle.net/xrGqk/4/

当您将鼠标悬停在LI自定义图像项目符号上时，您应该会收到提醒。

尝试一下，看看它们是否适合你。如果是这样，请考虑发布给您带来问题的代码。