javascript - 鼠标悬停问题

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>