将鼠标悬停在绝对定位的div上触发 [英] Mouseover triggered on absolute positioned div
问题描述
将鼠标悬停在表格单元格的右上角，将显示一个小的放大镜图标.将鼠标悬停在放大镜图标上，然后单击它会打开一个对话框窗口，以显示有关该特定表格单元格中项目的详细信息.我想在数百个表单元格中重复使用相同的图标，而不必每次都重新创建它.
Have a small magnifying glass icon that appears in the top right corner of a table cell when the table cell is hovered over. Mousing over the magnifying glass icon and clicking it will open a dialog window to show detailed information about the item in that particular table cell. I want to reuse the same icon for hundreds of table cells without recreating it each time.
具有一个完全定位并隐藏的<span>.当_previewable表单元格悬停时，<span>将移动到正确的位置并显示.此<span>也在DOM中移动，成为_previewable表单元格的子级.这使连接到<span>的单击处理程序能够找到_previewable父级，并从其jquery data()对象获取信息，该对象用于填充对话框的内容.
Have a single <span> that is absolutely positioned and hidden. When a _previewable table cell is hovered, the <span> is moved to the correct location and shown. This <span> is also moved in the DOM to be a child of the _previewable table cell. This enables a click handler attached to the <span> to find the _previewable parent, and get information from it's jquery data() object that is used to populate the contents of the dialog.
这是我的HTML的非常简化的版本:
Here is a very simplified version of my HTML:
<body>
<span id="options">
<a class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-search"></span>
Preview
</a>
</span>
<table>
<tr>
<td class="_previewable">
<img scr="user_1.png"/>
<span>Bob Smith</span>
</td>
</tr>
</table>
</body>
这个CSS:
#options {
position: absolute;
display: none;
}
使用以下jQuery代码:
With this jQuery code:
var $options = $('#options');
$options.click(function() {
$item = $(this).parents("._previewable");
// Show popup based on data in $item.data("id");
Layout.renderPopup($item.data("id"),$item.data("popup"));
});
$('._previewable').live('mouseover mouseout',function(event) {
if (event.type == 'mouseover') {
var $target = $(this);
var $parent = $target.offsetParent()[0];
var left = $parent.scrollLeft + $target.position().left
+ $target.outerWidth() - $options.outerWidth() + 1;
var top = $parent.scrollTop + $target.position().top + 2;
$options.appendTo($target);
$options.css({
"left": left + "px",
"top": top + "px"
}).show();
}
else {
// On mouseout, $options continues to be a child of $(this)
$options.hide();
}
});
问题
在通过AJAX重新加载或更改表的内容之前，此解决方案非常有效.因为<span>从<body>移到了它的单元格中，所以在AJAX调用期间它被扔掉并被替换了.因此，我首先想到的是在鼠标移出表格单元格时将<span>移回正文，如下所示:
Problem
This solution works perfectly until the contents of my table are reloaded or changed via AJAX. Because the <span> was moved from the <body> to be a child of the cell, it gets thrown out and replaced during the AJAX call. So my first thought is to move the <span> back to the body on mouseout of the table cell, like this:
else {
// On mouseout, $options is moved back to be a child of body
$options.appendTo("body");
$options.hide();
}
但是，<span>随鼠标悬停而消失.即使<span>是_previewable的子级并且完全显示在_previewable表单元格的边界内，当鼠标移入<span>时，mouseout事件似乎在_previewable上被调用.目前，我仅在Chrome中对此进行了测试.
However, with this, the <span> disappears as soon as it is mouseover. The mouseout event seems to be called on _previewable when the mouse moves into the <span>, even though the <span> is a child of _previewable and fully displayed within the boundaries of the _previewable table cell. At this point, I've only tested this in Chrome.
-
当鼠标仍在
_previewable的边界内时，为什么要在_previewable上调用mouseout?是因为<span>的位置完全正确吗?
Why would mouseout be called on
_previewable, when the mouse is still within the boundaries of_previewable? Is it because the<span>is absolutely positioned?
如何在不重新创建<span>并且它是每个AJAX表参照上的单击处理程序的情况下完成这项工作?
How can I make this work, without recreating the <span> and it's click handler on each AJAX table referesh?
推荐答案
如果您更改事件，那么其余的内容(附加到<body>)将起作用，如下所示:
If you change your events then the rest of what you have (appending to <body>) will work, like this:
$('._previewable').live('mousenter mouseleave',function(event) {
与mouseover和mouseout不同，mousenter和mouseleave事件在移入或移出孩子时不会触发，因此在这种情况下，它们的行为将与您想要的一样.
Unlike mouseover and mouseout, the mousenter and mouseleave events won't fire when moving to or from a child, so they'll behave like you want in this case.
但是为了保持清洁，我分别绑定了.live('mouseenter)和.live('mouseleave')并删除了if()，看起来和看到的情况要容易得多，虽然可能只是我自己:)
For cleanliness though, I'd bind .live('mouseenter) and .live('mouseleave') separately and remove the if(), it's much easier to look and see what's going on, might be just me though :)
这篇关于将鼠标悬停在绝对定位的div上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
