On hovering any elements transform all the elements

Question

I have 3 elements: svg, p and p

HTML code

<svg xmlns="http://www.w3.org/2000/svg" class="absolute top-1/4 left-12" width="335.312" height="119.152" viewBox="0 0 335.312 119.152">
    <path id="Path_2" data-name="Path 2" d="M334.1,0H58.861L0,58.861l58.861,58.861H334.1Z" transform="translate(0.707 0.723)" fill="#ed3430" stroke="rgba(0,0,0,0)" stroke-width="1"/>
</svg>

<p class="absolute text-white top-28 left-24 text-4xl font-extrabold">Text A</p>
<p class="absolute text-white top-52 w-40 font-extrabold italic text-center left-20">Some text...</p>

Css code

svg, p {
    transition: transform 1s;
}

svg:hover, p:hover {
    transform: translate(-30px, 0px);
}

When I hover any of these 3 elements I would like to transform all these 3 elements. Currently, if I hover p element then only specific p element transforms leaving other 2 elements unaffected.

Updated - Video added

https://www.veed.io/view/b7a90341-0307-4ff1-a871-84639407086b

Answer 1

If you want them all to do the same thing at the same time, you could wrap them in a container instead of trying to iterate through them and get them all to cooperate with each other.

.container {
  display: flex;
  flex-direction: column;
  transition: transform 1s;
  width:max-content;
}

.container:hover {
  transform: translate(-30px, 0px);
  transition: transform 1s;
}

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" class="absolute top-1/4 left-12" width="335.312" height="119.152" viewBox="0 0 335.312 119.152">
    <path id="Path_2" data-name="Path 2" d="M334.1,0H58.861L0,58.861l58.861,58.861H334.1Z" transform="translate(0.707 0.723)" fill="#ed3430" stroke="rgba(0,0,0,0)" stroke-width="1"/>
</svg>

  <p class="absolute text-white top-28 left-24 text-4xl font-extrabold">Text A</p>
  <p class="absolute text-white top-52 w-40 font-extrabold italic text-center left-20">Some text...</p>
</div>