如何在像WordPress帖子列表编辑链接的悬停效果上实现jQuery?

时间:2014-01-12 09:56:31

标签: php jquery css wordpress

WordPress Posts List's onhover Link load

鼠标悬停时,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&amp; 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>

它几乎完全相同:在mouseenter上加载链接div。但问题是:它显示了任何行的mouseenter上所有行的编辑链接。这对代码来说是合乎逻辑的。

但是我只想在悬停的行上加载编辑链接,比如WordPress。 (参考:图片)查看编辑链接仅在一行上可见,而不是全部可见。

如何修改我的javascripts以实现这一目标?

2 个答案:

答案 0 :(得分:2)

你可以用一些简单的CSS来做到这一点:

除了必须隐藏链接的规则外,还要添加以下内容。

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

你可以删除你在那里尝试这样做的相关javascript。

这是一个jsfiddle:http://jsfiddle.net/CKaPv/1/

答案 1 :(得分: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');
    });
  });