CODEWITHSUNDEEP
javascriptonmouseout
David Starkey
David Starkey

Reputation: 1840

onmouseout not triggering but onmouseover is

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?

Upvotes: 0

Views: 1259

Answers (4)

Mr.TK
Mr.TK

Reputation: 1836

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>

Upvotes: 3

dsuess
dsuess

Reputation: 5347

Can you switch to CSS3 (pseudo elements like :after are supported by all major browser version) or do you need to stick on js? take a look at http://jsfiddle.net/jQRR7/31/

HTML

<table>
    <tr class="title" name="titleGroup" style="background: #c3c3c3" onclick="$('.Group').toggle();">
        <td colspan="2">Group with CSS3</td>
    </tr>
</table>

CSS

.title td {
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
td:before{
    content: '+++ ';
}
td:after{
    content: ' +++';
}
tr:hover td:before{
    content: '--- ';
}
tr:hover td:after{
    content: ' ---';
}

Upvotes: 0

dsuess
dsuess

Reputation: 5347

Checkout http://jsfiddle.net/jQRR7/30/

This works (at least in webkit browsers, Firefox still to be done)

onmouseover='this.innerHTML=this.innerHTML.replace(/-/g,"+");'     
onmouseleave='this.innerHTML=this.innerHTML.replace(/\+/g,"-");'

It contains 2 issues:

a) replace() will replace only 1x, unless you hand over a regular expression (attention: do not surround the regex by quotes!) More about replace() can be found at http://devdocs.io/javascript/global_objects/string/replace DevDocs.io JS replace()

b) mouse over seems to be called, but mouseout just 1x,so only 1 time +++ will be replaced

Upvotes: 0

David Starkey
David Starkey

Reputation: 1840

Building off of adeneo's fiddle, using jQuery with mouseleave is the way to go. However, the text could include a - or + so I had to update a bit to specifically look for 3 in a row.

Here is the final jQuery:

$('.title').on('mouseenter mouseleave', function(e) {
    $('td', this).text(function(_,txt) {
            return txt.replace(/[+]{3}|[-]{3}/g, function(x) {
            return x=='---' ? '+++' : '---';
        });
    });
});

http://jsfiddle.net/jQRR7/29/

Upvotes: 0

Related Questions