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

回答

相关问题