鼠标悬停仅在文本上而不是在整行上

【问题标题】：Mouse Over only on text not on entire row鼠标悬停仅在文本上而不是在整行上
【发布时间】：2013-01-12 14:43:54
【问题描述】：

如何仅在文本上而不是整行上提供鼠标悬停效果。我尝试使用 Position()，但结果为空。下面是小提琴链接，

<ul id='ulid'>
<li>Task1</li>
<li>Task2</li>
<li>Task3</li>
<li>Task4</li>
<li>Task5</li>
<li>Task6</li>
<li>Task7</li>
</ul>

<br /><br />


<br /><br />

<div id="show_details"></div>

jQuery(document).ready(function() {


$('ul#ulid li').hover(function() {
    $('#show_details').html($(this).text());
}, function() {
    $('#show_details').html('');
});
});

请帮忙

【问题讨论】：

在
中使用

我上面那位是对的。将您的文本包裹在中并在 span 上使用悬停功能。

标签： javascript jquery html css

【解决方案1】：

您的li 元素不能被块显示。有很多方法可以处理它，但一种简单的方法是用 span 包装它们并在这些 span 上触发 .hover：

<li><span>Task1</span></li>
...
$('ul#ulid li span').hover(function() {

http://jsfiddle.net/xneG5/

以编程方式：http://jsfiddle.net/xneG5/2/

仅限 CSS：http://jsfiddle.net/xneG5/3/

【讨论】：

【解决方案2】：

将 li 元素的边距和内边距设置为 0 可能会解决这个问题。它触发整行的原因是因为 li 带有默认边距和填充。

【讨论】：