鼠标悬停问题

发布于 2024-10-21 08:17:56 字数 684 浏览 8 评论 0原文

我有一个调用 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

原文

I have a a link that calls a onmouseover javascript function that makes a div below it visible. Now this all works.

Now the problem is I have a a href link and when I mouse over the top part of it, it works perfectly but when I move my mouse overtop of the "now visible" div it blinks because html seems to think it is not off the div and then on it again so it keeps turning it off and on.

How could I stop this from happening? (html below, javascript is a simple function to make it visible, no point in posting, it works)

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

VIDEO OF IT HAPPENING: http://screencast.com/t/qjxHN4wyIc

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

老娘不死你永远是小三 2024-10-28 08:17:56

视频中演示的问题是 stock1 div 正在窃取焦点，然后触发 onmouseout，关闭 stock1 div，然后触发 A 标签的 onmouseover，显示 stock1 div，然后窃取焦点，触发 onmouseout 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>

The problem demonstrated in your video is that the stock1 div is stealing focus, which is then firing the onmouseout, closing the stock1 div, which then fires the onmouseover of the A tag, shows the stock1 div, which then steals focus, fires onmouseout of the A tag, etc...

The easiest thing to do is apply the same ShowStock onmouseout/onmouseover to the stock1 div as well, so that it "shows" itself while moused over, but hides itself when not moused over, except when you mouse over an area within the A tag that shows it.

For instance, this works perfectly (on jsfiddle.net, which also demonstrates a separate version with the error demonstrated in video):

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>

回复收藏 0 原文