/    Sign up×
Community /Pin to ProfileBookmark

flickering image (events)

Copy linkTweet thisAlerts:
Mar 05.2011

I created a div with a child (removeIcon). The goal is: when you go over the div the removeIcon(an X) appears.When you go out of the div with your mouse, the icon goes away. I used the javascript onmouseover and onmouseout in the div to do this. But here is when it goes wrong: when I go over the div, the icon appears as expected. When I go over the removeIcon with my mouse, the onmouseout event of the div is triggered and the icon disappears. But now when the icon has disappeared, the onmouseover of the div is triggered again. This continues into infinity and shows as a flickering to the eye. How can I overcome this matter?

Help is very much appreciated.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@misfitplanetMar 05.2011 — I had some flickering problems with anchors, not images. I was able to stop the flickering by adjusting the z-index. I'm new and don't know if this will help in your case, but it did with my anchors.
Copy linkTweet thisAlerts:
@vjeetjeauthorMar 05.2011 — no, z-index doesn't help. But I'm looking for a solution into that direction
Copy linkTweet thisAlerts:
@misfitplanetMar 05.2011 — no, z-index doesn't help. But I'm looking for a solution into that direction[/QUOTE]

Wish I had the quick answer, just to new to the language. If I didn't get an answer soon, I'd read upon on the event loop in Javascript. I'm sure it has to do with that. I had similar problems in other languages that were fixed once I fully understood the event loop, when events are processed, when a repaint even occurs, etc.
Copy linkTweet thisAlerts:
@vjeetjeauthorMar 05.2011 — This took me way too much time to solve this problem

Here is the solution for other interested people:

search for these terms: relatedTarget, fromElement, toElement

Here is a great source: http://www.quirksmode.org/js/events_mouse.html
×

Success!

Help @vjeetje 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.19,
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,
)...