Response title
This is preview!
tricky mouseenter mouseleave with child and parent element
in Using jQuery
•
9 years ago
Hello all,
I have a litte tricky mouseenter/leave and click action that I solved in this way:
It is in fact a tiny detail so it has to work in that size also. Excuse me the eye hurting ;-)
First of all: the code that I did so far works in a way but not quite sober.
It means that it depends sometimes from which side the mouse arrives over the divs etc. to make it react a little „nervous“.
Here is briefly what I wanted to achieve.
The „plus“ symbol is at first only clickable.
Once clicked the second time the mouse moves over it, also reveals a „minus“ symbol offering the possibilities:
1) to return to the beginning (in fact if you click the plus a text is zoomed in via font-size and when you click minus it returns at once to the original font-size value) via click on it
2) go on clicking on the „plus“ (if you want the text to see even one step bigger)
I also wanted an identical mouseleave event for two actions:
1) click the „minus“ -> „minus“ symbol turns in again
2) leave the whole +- area with the mouse -> „minus“ symbol turns in again also
As I said it works as it is right now but not very constantly.
Sometimes when the mouse moves over the plus f.e. the „-“ comes out very briefly and at once returns in (which avoids it being clickable)
I believe it has to do with the (for me) very consistent problem that a mouseenter in a child element is interpretated as a mouseleave of its parent (which it shouldn’t!!)
My question is:
How has this to be done in a professional way?
For I am relative beginner and I don’t know better how to do it.
Thanks to you for hints and ideas!
Garavani
1