The bottom line is that when the a tag is hover, bursts of animation should be output. With a hover, everything works correctly: bursts appear when I sum up the mouse on the text itself.
But if I start to remove it, it will continue until the visible blue frame. I turned them on with the element inspector in Chrome, indicating there that the a tag was in focus ( :focus ).
That is, the picture even shows that the content is calculated even when the bursts have visible: hidden; . You can put the transform: scale (0,0); , but anyway, when outputting, it will be necessary to set (1, 1) and this will not solve the problem of removing the mouse from the element - the bursts will disappear only when the mouse leaves it, and not the text in the tag а .
And I need everything to be tied specifically on the text of the contents of a .
The bursts themselves in the form of svg are inside the a tag, so to speak, "naked" svg, so I did not unfold it.

123

Closed due to the fact that the essence of the question is not clear to the participants of Vadim Ovchinnikov , user194374, AK ♦ , aleksandr barakin , Alex January 7, 'at 7:54 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • And just ask the child position: absolute ? Then the place of nested elements will not affect the parent. - Vadim Ovchinnikov
  • one
    You'd better recreate the example itself, then it would be easier for you to help. - Vadim Ovchinnikov
  • Show here the very animation with the code, and then with a tambourine it is difficult to ride :) - Yuri
  • @VadimOvchinnikov, the fact is that the "a" tag and the internal svg are already set to position: absolute. The place does not affect ... But when you write a: hover, then with the appearance of a burst, the svg (descendant) space takes place, as it were, plus the "a" tag (parent). Maybe there is a property that disables it? - VostokSisters
  • @VadimOvchinnikov, here is the repository . - VostokSisters

1 answer 1

I did not find a specific answer to the question ... Apparently, the sizes of the nested elements cannot be excluded from the calculation of the element size if the nested elements exceed the parent ones, given that overflow: hidden is not a solution.
Nevertheless, I solved this problem by simply removing elements and then manipulating the animation through the selector of neighboring elements ( .class1 + .class2 ), which refers to the next element in the house structure.
It turned out about this kind of code for the selector: a:hover + figure > .splash , which can be read like this: "when linking a hopper, we immediately select the following <figure> , and in it we apply styles to all elements with sister nesting with class .splash ".