鼠标悬停在绝对定位的 div 上触发

Question

目标

当将鼠标悬停在表格单元格上时，表格单元格的右上角会出现一个小的放大镜图标。将鼠标悬停在放大镜图标上并单击它将打开一个对话框窗口，以显示有关特定表格单元格中的项目的详细信息。我想为数百个表格单元重复使用相同的图标，而不是每次都重新创建它。

部分解决方案

有一个绝对定位和隐藏的

<span>

。当

_previewable

表格单元格悬停时，

<span>

会移动到正确的位置并显示。此

<span>

也会在 DOM 中移动，成为

_previewable

表格单元格的子级。这使得附加到

<span>

的单击处理程序能够找到

_previewable

父级，并从其用于填充对话框内容的 jquery data() 对象中获取信息。

这是我的 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 代码：

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>

移回正文，如下所示：

    else {
        // On mouseout, $options is moved back to be a child of body
        $options.appendTo("body");
        $options.hide();
    }

但是，这样一来，一旦鼠标悬停，

<span>

就会消失。当鼠标移入

_previewable

时，mouseout 事件似乎会在

<span>

上调用，即使

<span>

是

_previewable

的子级并且完全显示在

_previewable

表格单元格的边界内。目前，我只在 Chrome 中对此进行了测试。

问题

当鼠标仍在
```
_previewable
```
的边界内时，为什么会在
```
_previewable
```
上调用 mouseout？是因为
```
<span>
```
是绝对定位的吗？
如何在不重新创建
```
<span>
```
及其每个 AJAX 表引用上的点击处理程序的情况下完成这项工作？

Answer 1

如果您更改事件，那么您拥有的其余内容（附加到

<body>

）将起作用，如下所示：

$('._previewable').live('mouseenter mouseleave',function(event) {

与

mouseover

和

mouseout

不同，

mouseenter

和

mouseleave

事件在移动到子级或从子级移出时不会触发，因此在这种情况下它们的行为会如您所愿。

为了清洁，我会分别绑定

.live('mouseenter

) 和

.live('mouseleave')

并移除

if()

，这样更容易查看并了解发生了什么，但可能只是我:)

Answer 2

为了避免每个单元格中出现微小的图像，这看起来需要做大量的工作。仅“重用”该元素的一个实例并没有真正获得太多好处。浏览器只需下载图像一次。从性能的角度来看，摆弄 DOM 树比仅仅切换突出显示元素的显示属性需要更多的资源。

最简单的方法可能就是将

<span>

放入您打印出来的每个单元格中，然后使用 CSS 隐藏/显示。

鼠标悬停在绝对定位的 div 上触发

问题描述投票：0回答：2

目标

部分解决方案

问题

问题

2个回答

最新问题

鼠标悬停在绝对定位的 div 上触发

问题描述 投票：0回答：2

目标

部分解决方案

问题

问题

2个回答

最新问题

问题描述投票：0回答：2