onmouseout不觸發，但onmouseover是

Here is a simplified fiddle onmouseout不觸發，但onmouseover是

我有一個表內有子分組。我想這些子類別被隱藏，直到用戶點擊子標題行，它看起來像這樣：

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

所以，onmouseover，應該更改行看起來像：+++集團+++
和onmouseout應該將其改回：---集團---

然而，只有onmouseover觸發器，我無法獲取文本回去。

我最初有鼠標懸停/調出一個函數，但它有相同的結果。另請注意，此頁面是動態生成的，因此文本並不總是「Group」。

我在做什麼錯了，我怎樣才能讓onmouseout重置文字？

來源

2014-02-27 David Starkey

這是一種方式*不*要做到這一點！如果你使用jQuery，爲什麼不使用適當的事件處理程序而不是垃圾？ – adeneo

@adeneo最初它有點複雜，但它仍然不起作用，所以我一直在消除中間件，直到剩下的東西。 –

@XIII：您正在將'tr'元素的'.innerHTML'設置爲文本？一個'tr'應該有'th'或'td'元素。 –

也許你想使用onmouseleave事件？ :)

正確使用你的情況和OnMouseLeave在事件替換功能：

<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編輯：

Firefox不上TR標記支持OnMouseLeave在事件！將這些事件deffinition到 <TD>

來源

2014-02-27 18:27:05

Dos不工作... –

我改變了小提琴使用'onmouseleave'，它不會改回：http://jsfiddle.net/jQRR7/9/ –

複製粘貼到小提琴你的代碼，仍然無法正常工作：http://jsfiddle.net/jQRR7/14/ –

結帳http://jsfiddle.net/jQRR7/30/

這工作（在WebKit瀏覽器至少，火狐仍然要做）

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

它包含了2個問題：

a）replace（）將只替換1x，除非你交出一個正則表達式（注意：不要用引號包圍正則表達式！）關於replace（）的更多信息可以在012處找到DevDocs.io JS replace()

二）鼠標好像是叫，但鼠標移出只是1X，所以只有1次+++將使用jQuery與mouseleave更換

來源

2014-02-27 19:02:31 dsuess

在Firefox中不起作用。 –

你是對的，在FF中不起作用，但在webkit瀏覽器中。我會檢查這個。 – dsuess

不要打擾:)已經在我的答案！ :) –

大廈關閉adeneo的小提琴，是要走的路。然而，文本可能包括一個 - 或+，所以我不得不更新一點，專門查找連續3。

下面是最終的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/

來源

2014-02-27 19:04:37

您可以切換到CSS3（僞元素，比如：以後由所有主要的瀏覽器版本支持），或者你需要堅持對JS？看看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: ' ---'; 
}

來源

2014-02-27 19:15:33 dsuess

回答

相關問題