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>

这是我的代码.我正试图在徘徊<td>时显示第二张图像<tr>.图像显示在将文本悬停在第一个文本中,<td>但在鼠标离开文本时消失.这只发生在我的FF(v3.6)中,但在IE和Chrome中运行良好.有人可以帮我解决这个问题吗？

Answer 1

很可能是因为只要光标离开td带有文本的元素,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元素的行.如果是这样,请将其设为类并相应地调整选择器.