CODEWITHSUNDEEP
javascripthtmlonmouseover
Steven
Steven

Reputation: 13995

onmouseover issue

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

Upvotes: 0

Views: 1136

Answers (2)

Jared Farrish
Jared Farrish

Reputation: 49238

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>

Upvotes: 1

JeanK
JeanK

Reputation: 1775

Try to put the onmouseout event on the stock outsider element just the same way it is on the element "a" that has the onmousein event, and remove the onmouseout event of the original element.

This way it will just close when you get the mouse out of the stock element that has just appeared.

Upvotes: 1

Related Questions