在悬停任何元素时会改变所有元素

发布于 2025-01-29 21:32:47 字数 1065 浏览 2 评论 0 原文

我有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个元素不受影响。

更新 - 添加了视频

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感性 2025-02-05 21:32:47

如果您希望他们所有人都同时做同样的事情，则可以将它们包裹在容器中，而不是试图通过它们迭代并让它们所有人相互合作。

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

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>

回复收藏 0 原文

~没有更多了~