onmouseout not triggering but onmouseover is

Question

Here is a simplified fiddle

I have a table with sub-groupings inside of it. I want these sub-groupings to be hidden until the user clicks the sub-header row, which looks like this:

<tr class="title" name="titleGroup"  
 onmouseover='this.innerHTML=this.innerHTML.replace("---","+++");'  
 onmouseout='this.innerHTML=this.innerHTML.replace("+++","---");'  
 onclick="$('.Group').toggle();">
    <td colspan="2">--- Group ---</td>
</tr>

So, onmouseover, should change the row to look like: +++ Group +++
and onmouseout should change it back to: --- Group ---

However, only the onmouseover triggers and I cannot get the text to go back.

I initially had the mouse over/out calling a function, but that has the same result. Also note that this page is dynamically generated so the text is not always "Group".

What am I doing wrong and how can I get onmouseout to reset the text?

Answer 1

Maybe you wanted to use onmouseleave event? :)

The proper use of replace function in your case and onmouseleave event:

<table width="550px">
<tr class="title" name="titleGroup" >
        <td 
        onmouseover='this.innerHTML=this.innerHTML.replace(/-{3}/g,"+");'    
        onmouseleave='this.innerHTML=this.innerHTML.replace(/\+{3}/g,"-");' 
        onclick="$('.Group').toggle();" 
        colspan="2">--- Group ---</td>
    </tr>
    <tr class="Group" style="display:none;">
        <td>
<b>Group</b>
HCS:</td>
    <td>
                <input type="checkbox" name="did4" />
        </td>
        </tr>
        <tr class="Group" style="display:none;">
            <td>
    <b>Group</b>
NCD:</td>
        <td>
            <input type="checkbox" checked="" name="did5" />
        </td>
    </tr>
</table>

ANOTHER EDIT:

Firefox doesn't support onmouseleave event on TR marks! Move those events deffinition to <td>