Question

我有一个gridview，当我将鼠标悬停在特定列上时，我正在将一个外部div（位置：绝对）加载到该位置。这是通过在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，它会移开。请解决这个问题吗？

Answer 1

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

Answer 2

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

Answer 3

似乎onmouseout事件应附加到div。

Answer 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 Here

<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小部件来解决这个问题。

在gridview中显示浮动div

4 个答案: