jQuery li hover complete code

Question

<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>
<div id="show_details"></div>

I would like what's the JavaScript that I can use to copy the details of the li into the div on mouseover hide it on mouseout.

Answer 1

If you mean the "content" with "details", you might want to try:

var $details = $('#show_details');
$('ul > li').hover(function(){
   $details.text($(this).text());
}, function(){
   $details.text('');
});

Ref.: .hover()

Answer 2

Ref : jQuery.hover() , jQuery.html() , jQuery.empty()

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

Answer 3

This will work for a particular ul:

jQuery(document).ready(function(){

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

});

Demo