LoginSecure Hover: How to use nested hover effects.

Nested hover effects are possible when the structure of your webpage supports this behavior. Luckily 99.9% of the Joomla! templates do support this behavior.

To apply nested hover effects you need to have a parent element with a child or multiple children. Now you can assign a hover effect to the parent and another effect to the child(ren).

For instance, you can have a link with an icon class(icon-grow) attached to it. Then the direct parent can have a border transition(border-fade) and the wrapper parent can have a 2D transition(grow).

Visually Explained:
When the user moves the mouse towards the link it will hit the wrapper parent first and make the entire element grow. Then when moving the mouse closer to the link it will hit the links direct parent and will add the border-fade to that parent. Now moving towards the link and hovering on it the icon grows.

KB Article: https://loginsecure.eu/helpdesk/knowledgebase/view-article/125-loginsecure-hover-how-to-use-nested-hover-effects