[英]JQuery incompatibility problem (probably) in Firefox. Working in Chrome
<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. 悬停
<tr>
时,我试图在第二个<td>
显示3张图像。 Images appear on hovering the text in the first <td>
but disappears when the mouse leaves the text. 在第一个
<td>
中将文本悬停在图像上时会出现图像,但是当鼠标离开文本时图像会消失。 This happens only in my FF (v3.6), but works fine in IE and Chrome. 这仅在我的FF(v3.6)中发生,但在IE和Chrome中运行正常。 Can someone help me solve this please?
有人可以帮我解决这个问题吗?
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. 最可能的原因是,一旦光标将
td
元素与文本一起离开,就会引发mouseout
事件,气泡mouseout
升到父tr
元素并在那里进行处理。
Do it the jQuery way, don't attach event handlers in your HTML code. 用jQuery的方式做,不要在HTML代码中附加事件处理程序。
$(function() {
$('tr').hover(function() { // <- select the right tr here, by e.g. giving it an ID
$('#actions').toggle();
});
}
References: .hover()
, .toggle()
参考:
.hover()
.toggle()
Same for the other elements. 其他元素相同。 Your code will be cleaner because the view (HTML code) and the logic (JavaScript) is separated.
因为视图(HTML代码)和逻辑(JavaScript)是分开的,所以您的代码将更加简洁。
Also note that IDs have to be unique in a HTML document, so you cannot have another element with ID action
. 还要注意,ID在HTML文档中必须是唯一的,因此不能再有另一个元素带有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. 我之所以这样说,是因为当您的代码显示一个表行时,看起来您还有其他带有
#action
元素的行。 If so, make it a class and adjust the selectors accordingly. 如果是这样,请使其成为一个类并相应地调整选择器。
Come to the bright shining road of unobtrusive javascript . 踏上柔和的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.
也许之后您所有的问题都被吹走了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.