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

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文档中记录，您可以使用TW v2.2的Sibling selector variants (仅在博客中记录)。

<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 Playground。https://play.tailwindcss.com/PjcIhDMLXT?layout=horizontal