.mouseover on various divs

.mouseover on various divs

I'm learning jquery and code below makes hovering a div in another div to appear, and when the mouse leave the div disappears. But as you can see, the div "visualizar" this in a loop and when I move the mouse in a div appears in all, I wonder how I can make a div to appear at a time, I could modify the code?

script jquery:
  1. <script type="text/javascript">
  2. window.onload = inicia;
  3. function inicia() {
  4.     $("#visualizar").mouseover(
  5.         function() {
  6.             $("div.editarVis").show("slow");
  7.         }
  8.     )
  9.     $("#visualizar").mouseout(
  10.         function() {
  11.             $("div.editarVis").hide("slow");
  12.         }
  13.     )
  14. };
  15. </script>

html and php:

  1. <?php
  2.         require_once("includes/classes/bdClass.php");
  3.        
  4.         $instEstudo = new bdClass;
  5.        
  6.         $returnEstudo = $instEstudo->selectQuery("SELECT * FROM tab_estudos ORDER BY data_estudo");
  7.        
  8.         foreach($returnEstudo as $allEstudo) {
  9.         ?>
  10.        
  11.         <div id="visualizar">
  12.            
  13.             <?php echo $allEstudo['titulo_estudo']; ?>
  14.            
  15.             <div class="editarVis" style="display:none;">
  16.                 Tiago
  17.             </div>
  18.            
  19.         </div>
  20.        
  21.         <?php
  22.         }
  23.         ?>
Can anyone help me?


Thanks