title: Mouse Over only on text not on entire row
body: <p>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,</p>
  
  <pre><code>&lt;ul id='ulid'&gt;
  &lt;li&gt;Task1&lt;/li&gt;
  &lt;li&gt;Task2&lt;/li&gt;
  &lt;li&gt;Task3&lt;/li&gt;
  &lt;li&gt;Task4&lt;/li&gt;
  &lt;li&gt;Task5&lt;/li&gt;
  &lt;li&gt;Task6&lt;/li&gt;
  &lt;li&gt;Task7&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;br /&gt;&lt;br /&gt;
  
  
  &lt;br /&gt;&lt;br /&gt;
  
  &lt;div id="show_details"&gt;&lt;/div&gt;
  
  jQuery(document).ready(function() {
  
  
  $('ul#ulid li').hover(function() {
      $('#show_details').html($(this).text());
  }, function() {
      $('#show_details').html('');
  });
  });
  </code></pre>
  
  <p>Please help</p>