我试图创建一个表,其中有几个链接出现在悬停时并在离开时再次隐藏。我实现了这2个功能
<script type="text/javascript">
function hide(cls, no) {
var select = '.' + cls + no;
$(select).hide();
}
function show(cls, no) {
var select = '.' + cls + no;
$(select).show();
}
</script>
我的 HTML 代码是
<tr onmouseenter="show('inv', 1)" onmouseleave="hide('inv', 1)" >
<td width="30%">
<a class="single_image" href="img/img1-big.png"><span class="icon-picture"></span> Image1.jpg</a>
</td>
<td width="40%" align="center">
<div class="button-col">
<a href="#" class="inline-buttons inv1"><span class="icon-pencil"></span> Rename </a>
<a href="#" class="inline-buttons inv1"><span class="icon-arrow-down"></span> Download </a>
<a href="#" class="inline-buttons inv1"><span class="icon-share"></span> Share </a>
<a href="#" class="inline-buttons inv1"><span class="icon-trash"></span> Delete </a>
</div>
</td>
</tr>
我正在使用 Bootstrap 框架。 此代码在 IE9 和 Firefox 上完美运行
最佳答案
mouseenter
和 mouseleave
事件在 Chrome(和其他浏览器)中不可用。您应该使用 javascript 框架来标准化它,例如 jQuery。
使用 jQuery,尝试如下操作:
<tr data-no="1" data-cls="inv">
还有:
$(function() {
$('tr').each(function() {
var $target = $('.' + $(this).data('cls') + $(this).data('no'));
$(this).hover(
function() { $target.show(); },
function() { $target.hide(); }
);
});
});
有关.hover()的更多信息
:http://api.jquery.com/hover/
有关兼容性的更多信息,请参见:https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter#Browser_compatibility
关于JavaScript onmouseleave 和 onmouseenter 在 Firefox 和 IE9 中工作,但在 Chrome 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17959004/