CODEWITHSUNDEEP
htmlcsstailwind-css
juhend23d
juhend23d

Reputation: 103

React hover element change opacity on different element

I am using Tailwind CSS to style my elements. I want to achieve the following behavior: if I hover on the a element it shall trigger the h1 hover as well. How can I achieve this?

This is the code:

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

Upvotes: 1

Views: 1031

Answers (1)

dance2die
dance2die

Reputation: 36895

Undocumented on the official Tailwind documentation, you can use Sibling selector variants for TW v2.2 (documented only in blog).

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

Can't seem to make it work in code snippets here so, here is the Taiwlind CSS Playground. https://play.tailwindcss.com/PjcIhDMLXT?layout=horizontal

Upvotes: 1

Related Questions