I applied an interaction on a div so that when hovering, the div is accompanied by animation (shakeX). But there seems to be a problem. Because these interactions are only applied to the desired div and are not applied to its internal elements. This issue causes problems when hovering. Please see the structure of this item in the image below and check the problem in practice by referring to the above link.
What is the actual problem? Please provide a URL and explain what you think the issue is. And what is the purpose of wrapping the button in a div in your scenario?
Hi @aslotta, The url is at the beginning of my first comment
I put a button inside a div just to make it easier for reproduce this bug. It doesn’t matter what elements you use in the div or any other layout. When you assign an interaction to a div or any other layout, these interactions are not applied to the elements inside the div. Please watch the video below.
what do you mean with “not applied to the elements inside the div”? You add the interaction the div, not the elements within the div. So of course it’s the div that is animated.
Please do not move the mouse out of the div border. Rather, just hover over the button and the space inside the div. In this case, the animation will still run. While you haven’t moved the mouse out of the div border.
I think it’s working as expected. But if you want to animate a child-element when you hover a parent you need to change the target in the interactions-settings (not ‘self’). In your use-case you can chose css-selector and then paste the corresponding id or class-name of your child / children .
It is exactly like adding display: none; Give it, but only hide the div, not its internal elements.
Please see this link again. Here I have placed an interaction for the main div so that it is accompanied by animation when hovering. However, when we hover the mouse over the internal elements (image, text and button), the animation is executed again. Isn’t this still a bug?
Could you please try “mousenter” for the trigger instead of “hover”.
When using “hover”: Acutally it’s the case that the trigger is not applied on the children. In your example, when you hover over the div it’s triggered, but when you hover over the button and image it’s not. That’s because you applied the trigger to the div. HOWEVER it’s the case that if you leave from a child to the parent, hover is triggered again and that’s most likely unwanted in most situation. So maybe that could be considered a bug. Using “mousenter” doesn’t have that side-effect.
