How to show/hide a div on mouseover using jquery?

Answer 1

you cant give same id to multiple element

live code is here http://jsfiddle.net/GSz5X/

<table>
      <tr>
         <td class="divOne">div one</td>
         <td  class="divOne">2222</td>
      </tr>
      <tr>
         <td  class="divOne">div two</td>
         <td  class="divOne">2222</td>
      </tr></div>
</table>

<div id = "Details" >
5555shdrhdrh
</div>
​

$(function() {
$('.divOne').hover(function() { 
    $('#Details').toggle(); 
});
});
​

Answer 2

First of all you have repeated ids on elements, which is wrong. use classes instead, ids should be unique

<table>
      <tr>
         <td class="divOne">div one</td>
         <td  class="divOne">2222</td>
      </tr>
      <tr>
         <td  class="divOne">div two</td>
         <td  class="divOne">2222</td>
      </tr>
</table>

then change your code

$(function() {
  $('.divOne').hover(function() { 
    $('#Details').show(); 
  }, function() { 
    $('#Details').hide(); 
  });
});

this will end up (with your actual markup) with the result that your div will be shown when you hover on the table and it will be hidden when you don't

Answer 3

Change your id's to class identifiers. See example here: http://jsfiddle.net/A7f2p/

Answer 4

There should only be one ID on the page. Change your ID's for classes and your selector for a class selector:

<table>
      <tr>
         <td class="divOne">div one</td>
         <td class="divOne">2222</td>
      </tr>
      <tr>
         <td class="divOne">div two</td>
         <td class="divOne">2222</td>
      </tr>
</table>

And:

$(function() {
$('.divOne').hover(function() { 
    $('#Details').show(); 
}, function() { 
    $('#Details').hide(); 
});
});

Answer 5

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

<table id="divOne">
  <tr>
     <td>div one</td>
     <td>2222</td>
  </tr>
  <tr>
     <td>div two</td>
     <td>2222</td>
  </tr>
</table>
<div id="Details" style="display: none;">
    5555
</div>
<script type="text/javascript">
    $(function() {
        $('#divOne td').hover(
            function() { $('#Details').show(); }, 
            function() { $('#Details').hide(); }
        );
    });
</script>

Answer 6

USE class instead of ID

$(function() {
$('.divOne').hover(function() { 
    $('#Details').show(); 
}, function() { 
    $('#Details').hide(); 
});
});

HTML:

<td class="divOne">div one</td>