How can I achieve a jQuery onhover effect like WordPress post list's edit links?

Question

On mouse hover, the post edit and other related links are visible on the WordPress Posts List. I did a similar thing with the following js:

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js?ver=3.8.1-alpha'></script>
<script type="text/javascript">
  $(document).ready(function () {
    $(".edit_links").css('visibility', 'hidden');
    $(".each_row").mouseenter(function () {
        $(".edit_links").css('visibility', 'visible');
    }).mouseleave(function () {
        $(".edit_links").css('visibility', 'hidden');
    });
});
</script>

If my HTML & PHP are as follows:

<table width="100%" border="all">
    <tr id="row-1" class="each_row">
        <td>1</td>
        <td class="name">"Name"
            <div class="edit_links">
                <a href="?id=1">Edit</a>
            </div>
        </td>
    </tr>
    <tr id="row-2" class="each_row">
        <td>2</td>
        <td class="name">"Name New"
            <div class="edit_links">
                <a href="?id=2">Edit</a>
            </div>
        </td>
    </tr>
</table>

And the CSS is:

<style>.edit_links{visibility: hidden;}</style>

It does almost the same thing: load the link div on mouseenter. But, the problem is: it shows the edit links of all the rows on any row's mouseenter. And this is logical with the code.

But I want to load the edit links only on the hovered row, like WordPress. (Ref.: Image) See the edit links are visible only on a single row, not on all.

How can I modify my javascripts to achieve so?

Answer 1

You can do this with some simple CSS:

In addition to the rule you have to hide the links, add the following.

tr.each_row:hover .edit_links { visibility: visible; }

You can them remove the related javascript you've got there trying to do this.

Here's a jsfiddle: http://jsfiddle.net/CKaPv/1/

Answer 2

Here is a fiddle with the solution

jsfiddle

It selects each row in the table, and finds the next .edit_links class. The way you were trying to do it will select all elements with the .edit_links class.

$(".edit_links").css('visibility', 'hidden');
  $("table tr.each_row").each(function() {
      $(this).mouseenter(function () {
        $(this).find('.edit_links').css('visibility', 'visible');
    }).mouseleave(function () {
        $(this).find('.edit_links').css('visibility', 'hidden');
    });
  });