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

Question

我正在使用 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>

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

似乎无法使它在此处的代码片段中工作，因此，这里是 Taiwlind CSS 游乐场。 https://play.tailwindcss.com/PjcIhDMLXT?layout=horizontal

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

React hover element change opacity on different element

html

css

tailwind-css