Jquery Maus über Ereignis

Question

Ich möchte eine versteckte div zeigen, wenn ich Maus über einen Link auf meiner Tabellenzelle. Das Ereignis wird nur in der ersten Zeile ausgelöst. Das ist, was ich tat:

$(document).ready(function(){ 
    $("#show_div").mouseover(function() { 
     $("#hello").css('visibility', 'visible'); 
    }); 
    $("#hello").mouseover(function() { 
     $("#hello").css('visibility', 'visible'); 
    }); 
    $("#hello").mouseout(function() { 
     $("#hello").css('visibility', 'hidden'); 
    }); 
}); 

<form action="" method="post"> 
    <table class="table table-bordered table-hover"> 
     <div id="bulkOptionContainer" class="col-xs-4"> 
      <select class="form-control" name="bulk_options" id=""> 
       <option value="">Select Option</option> 
       <option value="publish">Publish</option> 
       <option value="draft">Draft</option> 
       <option value="delete">Delete</option> 
      </select> 
     </div> 
     <div class="col-xs-4"> 
      <input class="btn btn-success" type="submit" name="submit" value="Apply"/> 
      <a class="btn btn-primary" href="posts.php?source=add_post">Add New</a> 
     </div> 
     <thead> 
     <tr> 
      <th><input type="checkbox" name="checkbox[]" id="selectAllCheckBoxes"></th> 
      <th>Id</th> 
      <th>Author</th> 
      <th scope="col">Title</th> 
      <th>Category</th> 
      <th>Status</th> 
      <th>Image</th> 
      <th>Tags</th> 
      <th>Comments</th> 
      <th>Date</th> 
      <th>Edit</th> 
      <th>Delete</th> 
     </tr> 
     </thead> 
     <tbody> 
     <?php $query = "SELECT * FROM post ORDER BY post_id DESC"; 
     $result_set = mysqli_query($link, $query); 
     confirm_query($result_set); 
     while ($row = mysqli_fetch_assoc($result_set)):?> 

      <tr> 
       <td><label><input type="checkbox" class="checkBoxes" name="checkBoxArray[]" 
            value="<?php echo $row['post_id']; ?>"></label></td> 
       <td><?php echo $row['post_id'] ?></td> 
       <td><?php echo $row['post_author'] ?></td> 
       <td width="100%"> 

        <!-- link to over--> 
        <a id="show_div" 
         href="../post.php?p_id=<?php echo $row['post_id'] ?>"><?php echo $row['post_title'] ?></a> 
        <!-- div to become visible on hover--> 
        <div id="hello" style="visibility:hidden;"> 
         <p>post</p> 
        </div> 
       </td> 
       <td><?php echo sel_cat_byId($row['post_category_id']) ?></td> 
       <td><?php echo $row['post_status'] ?></td> 
       <td><img width="100" class="img-responsive" src="../images/<?php echo $row['post_image'] ?>"></td> 
       <td><?php echo $row['post_tag'] ?></td> 
       <td><?php echo $row['post_comment_count']; ?></td> 
       <td><?php echo $row['post_date'] ?></td> 
       <td><a class="btn btn-danger" href="posts.php?delete=<?php echo $row['post_id']; ?> " 
         onclick="alert('Are You Sure?')">Delete</a></td> 
       </td> 
       <td><a class="btn btn-success" href="posts.php?source=edit_post&edit=<?php echo $row['post_id']; ?>">Edit</a> 
       </td> 
       </td> 

      </tr> 



     <?php endwhile; ?> 

     </tbody> 
    </table> 
</form> 

**** das Ereignis nur feuert auf der ersten Reihe. Dank

Answer 1

zuerst Ihre ID mit Klasse ersetzen und dann versuchen, diese

$(".show_div").mouseover(function() { 
 
     $(this).next(".hello").css('visibility', 'visible'); 
 
    }); 
 
    $(".show_div").mouseout(function() { 
 
     $(this).next(".hello").css('visibility', 'hidden'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<a class="show_div" 
 
         href="#">abc</a> 
 
        <!-- div to become visible on hover--> 
 
        <div class="hello" style="visibility:hidden;"> 
 
         <p>post</p> 
 
        </div>