JQuery incompatibility problem (probably) in Firefox. Working in Chrome

<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>

This is my code. I'm trying to show the 3 images in the second <td> when the <tr> is hovered. Images appear on hovering the text in the first <td> but disappears when the mouse leaves the text. This happens only in my FF (v3.6), but works fine in IE and Chrome. Can someone help me solve this please?

Most probably because as soon as the cursor leaves the td element with the text, a mouseout event is raised, bubbles up to the parent tr element and is handled there.

Do it the jQuery way, don't attach event handlers in your HTML code.

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

References: .hover(), .toggle()

Same for the other elements. Your code will be cleaner because the view (HTML code) and the logic (JavaScript) is separated.

Also note that IDs have to be unique in a HTML document, so you cannot have another element with ID action. I am saying this because as your code shows a table row, it looks like you have other rows with an #action element. If so, make it a class and adjust the selectors accordingly.

Come to the bright shining road of unobtrusive javascript. We all got ballons and stuff here, it's so fun! :)

Seriously, think over doing all that unobtrusive instead with inline event handlers. Maybe all your problems are blown away afterwards.