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>中显示3张图片。图像显示在将文本悬停在第一个<td>中，但在鼠标离开文本时消失。这只发生在我的FF（v3.6）中，但在IE和Chrome中运行良好。有人可以帮我解决这个问题吗？

Answer 1

最有可能的原因是，一旦光标离开带有文本的td元素，就会引发mouseout事件，冒泡到父tr元素并在那里处理。< / p>

以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 的光辉之路。我们都有气球和东西，这太有趣了！：）

说真的，请考虑使用内联事件处理程序来做所有不引人注目的事情。也许之后所有的问题都会被吹走。

Firefox中的JQuery不兼容问题（可能）。在Chrome中工作

2 个答案: