在网格视图中显示浮动 div答案

【问题标题】：showing floating div in a gridview在网格视图中显示浮动 div
【发布时间】：2009-08-12 15:29:29
【问题描述】：

我有一个 gridview，当我将鼠标悬停在特定列上时，我正在将外部 div（位置：absolute）加载到该位置。我通过在 gridview 单元的 onmouseover 事件中调用 js 函数来完成此操作（ gvTestGrid.cells[1].attributes.add("onmouseover","loadDIV();"))。我能够在鼠标悬停时正确加载 div，但问题是我加载的 div 在其中包含一个下拉列表和按钮。当我尝试在 div 内移动鼠标以单击按钮或选择下拉列表时，div 会移开。这发生在我添加后 onmouseout 事件(gvTestGrid.cells[1].attributes.add("onmouseout","removeDIV();"))

没有 onmouse out 事件，我的 div 将继续加载到 gridview 单元格上。请帮助

我做了一个小样本

<html>
  <div id="divPopup" onmouseout="removeDIV(this,event);" style="display:none;width:100px;height:100px;color:Navy;border:2px;border-color:Red;border-style:solid;">
    Yes its me
    </div>

    <table>
    <tr><td>A</td></tr>
    <tr><td>S</td></tr>
    <tr><td onmouseover="loadDIV(event)" onmouseout="removeDIV(this,event);">D</td></tr>
    <tr><td>E</td></tr>
    </table>

</html>
<script language="javascript" type="text/javascript">
function loadDIV(evt)
{
var myWin = document.getElementById('divPopup');
myWin.style.position='absolute';
myWin.style.left = evt.x;
myWin.style.top = evt.y;
myWin.style.display='block';

}

function removeDIV(obj,evt)
{
var myWin = document.getElementById('divPopup');
myWin.style.display='none';
myWin.style.left = 0;
myWin.style.top = 0;
}
</script>

如果您尝试将鼠标输入到 div 中，它会移开。请问有什么解决方案吗？？

【问题讨论】：

请发布您的相关代码

标签： javascript gridview html

【解决方案1】：

在您完成弹出的 DIV 中的工作后删除该 div 怎么样？因此，您可以在单击 DIV 中的按钮时关闭 DIV（假设它确实有效并且应该在之后关闭）或以类似方式。

【讨论】：

【解决方案2】：

为隐藏 div 设置一个小的超时，并在 div 的 onmouseover 处理程序中清除此超时。

【讨论】：

【解决方案3】：

似乎 onmouseout 事件应该附加到 div 上。

【讨论】：

【解决方案4】：

如果您在此内容中没有 Anchor 标签，我可以建议一些 CSS 魔术吗？

这里是 CSS

a.MyCellPopup div.MyPopup {display:none;}
a.MycellPopup {position:relative;} /* Make pop up's position relative to the anchor tag */
a:hover.MyCellPopup div.MyPopup {display:block;position:absolute;top:10px;left:10px}

HTML 在这里

<a href="#" onclick="return false;" class="MyCellPopup">
    <div class="MyPopup">POP UP STUFF without links (links won't work)</div>
</a>

我有一个 onclick="return false" 所以如果他们点击单元格，他们不会被带到页面顶部。 href 需要在那里，否则 IE 将无法识别悬停。我从 ZenGarden 那里得到了关于如何做简单弹出窗口的想法。

如果这仍然不起作用，我强烈建议您访问 YUI 库，他们有一个 javascript 小部件可以解决这个问题。

【讨论】：