在悬停任何元素时转换所有元素

Question

我有 3 个元素：svg、p 和 p

HTML代码

<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代码

svg, p {
    transition: transform 1s;
}

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

当我悬停这 3 个元素中的任何一个时，我想转换所有这 3 个元素。目前，如果我将鼠标悬停在 p 元素上，那么只有特定的 p 元素会变换，而其他 2 个元素不受影响。

已更新 - 已添加视频

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

Answer 1

如果您希望它们同时做同样的事情，您可以将它们包装在一个容器中，而不是试图遍历它们并让它们相互协作。

.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>

在悬停任何元素时转换所有元素

On hovering any elements transform all the elements

html

css

hover

css-transitions

css-transforms