Firefox中的JQuery不兼容问题。 在Chrome中工作

Question

<tr onmouseover="$('#actions').show();" onmouseout="$('#actions').hide();" >
    <td>
        <a onclick="showContacts();">Group Name</a>
    </td>
    <td>
        <span id="actions" style="display:none;">
            <img src="../images/Delete-icon.png" onclick="del();"/>
            <img src="../images/add-16.png" onclick="loadpage('contacts.php');" />
            <img src="../images/mail.png" onclick="send();" />
        </span>
    </td>
</tr>

这是我的代码。 悬停<tr>时，我试图在第二个<td>显示3张图像。 在第一个<td>中将文本悬停在图像上时会出现图像，但是当鼠标离开文本时图像会消失。 这仅在我的FF（v3.6）中发生，但在IE和Chrome中运行正常。 有人可以帮我解决这个问题吗？

Answer 1

最可能的原因是，一旦光标将td元素与文本一起离开，就会引发mouseout事件，气泡mouseout升到父tr元素并在那里进行处理。

用jQuery的方式做，不要在HTML代码中附加事件处理程序。

$(function() {
    $('tr').hover(function() { // <- select the right tr here, by e.g. giving it an ID
        $('#actions').toggle();
    });
}

参考： .hover() .toggle()

其他元素相同。 因为视图（HTML代码）和逻辑（JavaScript）是分开的，所以您的代码将更加简洁。

---

还要注意，ID在HTML文档中必须是唯一的，因此不能再有另一个元素带有ID action 。 我之所以这样说，是因为当您的代码显示一个表行时，看起来您还有其他带有#action元素的行。 如果是这样，请使其成为一个类并相应地调整选择器。

Answer 2

踏上柔和的JavaScript的璀璨之路。 我们所有人都在这里得到气球和东西，真是太有趣了！ :)

认真地，考虑一下使用内联事件处理程序来进行所有这些操作，而不是干扰太大。 也许之后您所有的问题都被吹走了。