0

その下のdivを表示するonmouseoverjavascript関数を呼び出すリンクがあります。これですべて機能します。

問題は、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

4

2 に答える 2

1

ビデオで示されている問題は、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>
于 2011-03-09T01:18:15.863 に答える