鼠标悬停时,帖子编辑和其他相关链接在 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>
它做几乎相同的事情:在 mouseenter 上加载链接 div。但是,问题是:它显示了任何行的鼠标输入上所有行的编辑链接。这与代码合乎逻辑。
但我只想在悬停的行上加载编辑链接,例如 WordPress。 (引用:图片)看到编辑链接仅在一行中可见,而不是在所有行中可见。
我如何修改我的 javascripts 来实现这一点?
最佳答案
您可以使用一些简单的 CSS 来做到这一点:
除了必须隐藏链接的规则外,添加以下内容。
tr.each_row:hover .edit_links { visibility: visible; }
你可以让他们删除你在那里尝试执行此操作的相关 javascript。
这是一个 jsfiddle:http://jsfiddle.net/CKaPv/1/
关于php - 我怎样才能像 WordPress 帖子列表编辑链接那样实现悬停效果的 jQuery?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21073341/