[英]How can I achieve a jQuery onhover effect like WordPress post list's edit links?
On mouse hover, the post edit and other related links are visible on the WordPress Posts List. 鼠标悬停时,帖子编辑和其他相关链接在WordPress帖子列表上可见。 I did a similar thing with the following js: 我对以下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: 如果我的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>
And the CSS is: CSS是:
<style>.edit_links{visibility: hidden;}</style>
It does almost the same thing: load the link div on mouseenter. 它的作用几乎相同:将链接div加载到mouseenter上。 But, the problem is: it shows the edit links of all the rows on any row's mouseenter. 但是,问题是:它显示了任何行的mouseent上所有行的编辑链接。 And this is logical with the code. 这是符合逻辑的代码。
But I want to load the edit links only on the hovered row, like WordPress. 但是我只想将编辑链接加载到悬停的行上,例如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? 如何修改我的JavaScript来实现?
You can do this with some simple CSS: 您可以使用一些简单的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. 您可以让他们删除尝试执行此操作的相关JavaScript。
Here's a jsfiddle: http://jsfiddle.net/CKaPv/1/ 这是一个jsfiddle: http : //jsfiddle.net/CKaPv/1/
Here is a fiddle with the solution 这是解决办法
It selects each row in the table, and finds the next .edit_links
class. 它选择表中的每一行,并找到下一个.edit_links
类。 The way you were trying to do it will select all elements with the .edit_links
class. 您尝试执行此操作的方式将选择.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');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.