jQuery鼠标悬停事件

Question

当我将鼠标悬停在表格单元格上的链接上时，我想显示一个隐藏的div 。 该事件仅在第一行触发。 这就是我所做的：

$(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>

****该事件仅在第一行触发。 谢谢

Answer 1

首先将您的ID替换为班级，然后尝试

 $(".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>