bgreatfit bgreatfit - 1 year ago 168
jQuery Question

Jquery mouse over event

I want to show a hidden

when I mouse over a link on my table cell. The event only fires up on the first row. This is what i did:

$("#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>
<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>
<th><input type="checkbox" name="checkbox[]" id="selectAllCheckBoxes"></th>
<th scope="col">Title</th>
<?php $query = "SELECT * FROM post ORDER BY post_id DESC";
$result_set = mysqli_query($link, $query);
while ($row = mysqli_fetch_assoc($result_set)):?>

<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;">
<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><a class="btn btn-success" href="posts.php?source=edit_post&edit=<?php echo $row['post_id']; ?>">Edit</a>


<?php endwhile; ?>


****the event only fires up on the first row.

Answer Source

First replace your id with class and then try this

$(".show_div").mouseover(function() { 
        $(this).next(".hello").css('visibility', 'visible'); 
    $(".show_div").mouseout(function() { 
        $(this).next(".hello").css('visibility', 'hidden'); 
<script src=""></script>
<a class="show_div"
                     <!-- div to become visible on hover-->
                    <div class="hello" style="visibility:hidden;">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download