Mouse Over only on text not on entire row

Question

How can I provide Mouse hover effect only on text not on entire row. I tried with Position(), But cam out with empty .Below is fiddle link,

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

Please help

Answer 1

Your li elements can't be block-display. There are a lot of ways to handle it, but one easy way is just to wrap them with spans and trigger the .hover on those spans:

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

http://jsfiddle.net/xneG5/

Programatically: http://jsfiddle.net/xneG5/2/

CSS only: http://jsfiddle.net/xneG5/3/