Question

我有一个调用onmouseover javascript函数的链接，使得它下面的div可见。现在这一切都有效。

现在的问题是我有一个href链接，当我鼠标悬停在它的顶部时，它完美地工作但是当我将鼠标移到“现在可见”div的上方时它会闪烁，因为html似乎认为它不是离开div然后再继续它，所以它一直关闭它。

我怎么能阻止这种情况发生？（下面的html，javascript是一个简单的功能，使其可见，发布没有意义，它的工作原理）

<a style="text-decoration:none;display:block;" onmouseout="ShowStock(1,0);" onmouseover="ShowStock(1,1);" href="">50</a>
<div id="stock1" style="visibility: hidden;">
<a style=" background-color:#009933; text-align:center;" name="1">1</a>
</div>

发生的视频：http://screencast.com/t/qjxHN4wyIc

Answer 1

你的视频中显示的问题是stock1 div正在窃取焦点，然后触发onmouseout，关闭stock1 div，然后触发A标签的onmouseover，显示stock1 div，然后窃取焦点，点燃A标签等等......

最简单的方法是将相同的ShowStock onmouseout / onmouseover应用到stock1 div，以便它在鼠标悬停时“显示”自身，但是当没有被鼠标悬停时隐藏自己，除非你将鼠标移到某个区域内显示它的A标签。

例如，这完全有效（在jsfiddle.net上，它还演示了一个单独的版本，其中包含视频中显示的错误）：

a.hover {
    background-color: #ccc;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 15px;
    left: 15px;
}
#show1 {
    display: none;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 75px;
    left: 75px;
    background-color: #daa;
}

function showTarget(target, state) {
    switch (state) {
        case 1:
            state = 'block';
        break;
        default:
            state = 'none';
    }
    target = 'show'+target;
    document.getElementById(target).style.display = state;
}

<a class="hover" onmouseover="showTarget(1,1)" onmouseout="showTarget(1,0)">Test</a>
<div id="show1" onmouseover="showTarget(1,1)" onmouseout="showTarget(1,0)">Test Show</div>

Answer 2

尝试将onmouseout事件放在stock outsider元素上，就像它在具有onmousein事件的元素“a”上一样，并删除原始元素的onmouseout事件。

这样，当你将鼠标从刚刚出现的stock元素中移出时它就会关闭。

onmouseover问题

2 个答案: