Is there a way to create a mouse hover effect on text only, without affecting the entire row? I attempted using Position(), but didn't have success. Here is a link to the fiddle I created:
<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('');
});
});
I would greatly appreciate any assistance.