如何實現WordPress帖子列表的編輯鏈接之類的jQuery懸停效果？

Question

鼠標懸停時，帖子編輯和其他相關鏈接在WordPress帖子列表上可見。 我對以下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>

如果我的HTML和PHP如下：

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

CSS是：

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

它的作用幾乎相同：將鏈接div加載到mouseenter上。 但是，問題是：它顯示了任何行的mouseent上所有行的編輯鏈接。 這是符合邏輯的代碼。

但是我只想將編輯鏈接加載到懸停的行上，例如WordPress。 （參考：圖像）請參閱編輯鏈接僅在一行中可見，而在所有行中均不可見。

如何修改我的JavaScript來實現？

Answer 1

您可以使用一些簡單的CSS來做到這一點：

除了必須隱藏鏈接的規則外，還添加以下內容。

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

您可以讓他們刪除嘗試執行此操作的相關JavaScript。

這是一個jsfiddle： http : //jsfiddle.net/CKaPv/1/

Answer 2

這是解決辦法

的jsfiddle

它選擇表中的每一行，並找到下一個.edit_links類。 您嘗試執行此操作的方式將選擇.edit_links類中的所有元素。

$(".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');
    });
  });