Show hide class on hover using jQuery

Question

I am relatively new to jQuery, and I would like to be able to show a menu on mouseover.

Here is the HTML content:

<td class ="comment_div"> <?php echo("$comment_data['comment']); ?> <br/>
    <span class="comment_actions"> Approve | Delete | Spam | Edit</span>
</td>

Then the jQuery code:

$("comment_div").hover(
    function() { $(".comment_actions").show(); },
    function() { $(".comment_actions").hide(); }
);

This works except for I'm pulling multiple comments out and this only will show the menu on the first div no matter what "comment" is hovered. I would like to have the menu show only for the comment that is currently being hovered over. I think I need to use "$this" to make this work, but I am not sure how.

Peter Mortensen · Accepted Answer · 2019-11-23 21:58:39Z

18

If I'm reading that correctly, the format should be-

$(".comment_div").hover(
  function() { $(this).children(".comment_actions").show(); },
  function() { $(this).children(".comment_actions").hide(); }
);

edited Nov 23, 2019 at 21:58

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Sep 19, 2009 at 21:37

Kelly Robins

7,3236 gold badges46 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brooke. Over a year ago

Wouldn't that show/hide "comment_div"? I am trying to show/hide "comment_actions" on hover.

Kelly Robins Over a year ago

You are absolutely right- I am half asleep today and out of practice. That should be fixed now.

Kelly Robins Over a year ago

Wonderful!- Sorry again for the missteps there.

Peter Mortensen · Accepted Answer · 2019-11-23 22:01:39Z

Something like this works for me:

<script>
    $(document).ready(function() {
        $(".container").hover(
            function() { $(this).children('.comment_actions').show(); },
            function() { $(this).children('.comment_actions').hide(); }
        );
    });

</script>

<style>
</style>

<table border="1">
    <tr>
        <td class ="container"><br/>
            asd<span class="comment_actions">Approve | Delete</span>
        </td>
        <td class ="container"><br/>
            asd <span class="comment_actions">Approve | Delete</span>
        </td>
        <td class ="container"><br/>
            asd<span class="comment_actions"> Approve| Delete</span>
        </td>
    </tr>
</table>

However, the issue you'll face is hover actions over a div that has display: none; set. You might want to consider wrapping it in something that's mouse sensitive, and then displaying/hiding children instead.

Collectives™ on Stack Overflow

Show hide class on hover using jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related