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

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选择器变体(仅在博客中记录(。

<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