CODEWITHSUNDEEP
htmlmouseover
rubixibuc
rubixibuc

Reputation: 7397

Mouse Overs with Divs

I am trying to get this mousever to work, but I seems to be acting very buggy in all browser versions. I have something like this

<div id="foo" onMouseOut="makeHidden('foo');"><a href="somelink">Link Text</a></div>

I don't want the div to be hidden when the mouse goes over the link, and I assumed it wouldn't because the link is in the div. How can I get the div to stay visible until the mouse leaves it's boundary.

Upvotes: 1

Views: 139

Answers (3)

user1703050
user1703050

Reputation: 11

actuallly i m not geeting ur point might be this code will help u 

<script type="text/javascript">

function abc (mylink){

document.getElementById('mylink').style.display = 'none';

}

function abcd(mylink){

document.getElementById('mylink').style.display = 'block';

}

Upvotes: 0

Ry-
Ry-

Reputation: 224905

By using a fancy bubbling trick. See: http://jsfiddle.net/minitech/kZcCr/

You want to stop the propagation of the mouseout event if it's being applied to an element's children, and you also want to cancel the mouseout of the parent if we're moving into one of its children. That can be done using relatedTarget, or toElement on IE.

Upvotes: 0

Mike Cluck
Mike Cluck

Reputation: 32511

You might want to look in to using jQuery http://jquery.com/
Then you could write something like this: 

$("#foo").mouseenter( function(){makeHidden('foo');} );
$("#foo").mouseleave( function(){makeVisible('foo');} );

Or just cut out the middle man

$("#foo").mouseenter( function(){$(this).css("visibility", "hidden");} );
$("#foo").mouseleave( function(){$(this).css("visibility", "visible");} );

Upvotes: 2

Related Questions