反应悬停元素改变不同元素的不透明度答案

【问题标题】：React hover element change opacity on different element反应悬停元素改变不同元素的不透明度
【发布时间】：2021-12-28 22:00:06
【问题描述】：

我正在使用 Tailwind CSS 来设置元素的样式。我想实现以下行为：如果我将鼠标悬停在 a 元素上，它也会触发 h1 悬停。我怎样才能做到这一点？

这是代码：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<a href="#" className="absolute inset-0 z-10 flex flex-col items-center justify-center duration-300 opacity-0 bg-planbau-blue hover:opacity-75 bg-opacity-90"></a>
<h1 className="absolute inset-x-0 z-20 tracking-wider text-white max-w-max text-sn md:text-2xl left-4 top-4 opacity-0">
  test
</h1>

【问题讨论】：

我认为 Tailwind CSS 没有解决方案，但您可以使用 vanilla CSS 通过相邻的兄弟选择器来实现这一点。纯 CSS 解决方案好吗？

标签： html css tailwind-css

【解决方案1】：

Tailwind 官方文档中未记录，您可以将Sibling selector variants 用于 TW v2.2（仅在博客中记录）。

<a class="peer hover:opacity-75 hover:text-red-500" href="#">i am a link!</a>
<h1 class="text-3xl peer-hover:opacity-75 peer-hover:text-red-500 hover:text-red-500">I am the title!</h1>

这里的代码 sn-ps 似乎无法让它工作，所以这里是 Taiwlind CSS Playground。 https://play.tailwindcss.com/PjcIhDMLXT?layout=horizontal

【讨论】：