/    Sign up×
Community /Pin to ProfileBookmark

onmouseout not working as planned

Copy linkTweet thisAlerts:
Jul 24.2006

I have this pop up onmouseover (if that makes sense to you):

[code=html]<div onmouseout=”hide(‘choices’);” id=”choices”>
<a href=”link1″>link</a>
<a href=”link1″>link</a>
<a href=”link1″>link</a>
</div>[/code]

[CODE]function hide(id) {
document.findElementById(id).style.display = ‘none’;
}[/code]

The div pops up fine. When I move the mouse to link 1, fine. But that is as far as the mouse can go. If the mouse goes anywhere outside the dimensions of the first <a> element, the entire menu hides, even though the onmouseout is in the <div> element. What is wrong here?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@JAB_CreationsJul 25.2006 — Give the DIV a border in CSS like this...

border: #f0f solid 1px;[/quote]

I've had a problem with a script that wouldn't work because the contents inside of the divisable layer were below the actual div itself. If the border appears just between the first and second hyperlink give the div a height and then test it out.

If that isn't the issue it might be something I'm going to soon post a question about here on the forums.
Copy linkTweet thisAlerts:
@atealthaauthorJul 25.2006 — Nope, it does not work for me. The <div> already has width and height set.
Copy linkTweet thisAlerts:
@konithomimoJul 25.2006 — &lt;div onmouseout="this.style.display='none'" id="choices"&gt;
&lt;a href="link1"&gt;link&lt;/a&gt;
&lt;a href="link1"&gt;link&lt;/a&gt;
&lt;a href="link1"&gt;link&lt;/a&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@freeingJul 25.2006 — [CODE]
<script type="text/javascript">
<!--
function change(id) {
document.getElementById(id).style.display = 'none';
}
function change1(id,cls) {
document.getElementById(id).className = cls;
}
//-->
</script>[/CODE]


[code=html]
<style style="text/css">
<!--
.choices {border: 1px solid #999; background-color: #f8f8f8; width: 40%; padding: 8px;}
.choices1 { background-color: #fff; width: 40%; padding: 9px;}
//-->
</style>

<h3>choices</h3>
<div onmouseover="change('choices');" class="choices" id="choices">
<a href="link1">choices</a>
<a href="link1">link</a>
<a href="link1">link</a>
</div>


<h3>choices1</h3>
<div onmouseout="change1('choices1','choices');" onmouseover="change1('choices1','choices1');" class="choices" id="choices1">
<a href="link1">choices1</a>
<a href="link1">link</a>
<a href="link1">link</a>
</div>[/code]
Copy linkTweet thisAlerts:
@Orc_ScorcherJul 25.2006 — The div pops up fine. When I move the mouse to link 1, fine. But that is as far as the mouse can go. If the mouse goes anywhere outside the dimensions of the first <a> element, the entire menu hides, even though the onmouseout is in the <div> element. What is wrong here?[/QUOTE]See http://www.quirksmode.org/js/events_mouse.html, it explains your problem under the heading "Mousing out of a layer".
×

Success!

Help @atealtha spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...