JQuery incompatibility problem (probably) in Firefox. Working in 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>

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?

Answer 1

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.

Answer 2

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.