Nibelung Valesti Comments - Answer Overflow

Nibelung Valesti

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

Hmmm, it's really weird. But anyway, my main question has been answered and even will help out my overall writing with :has. Thank you so much for introducing it to me.

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

When I put back my configuration it's now working. With no changes from earlier.

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

It's weird.

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

and it worked, ok, now I can pinpoint where that bug is coming from

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

Oh... I just resetted my config.js

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

Maybe there's a problem in my tailwind

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

Hmmm, it's weird. This doesn't work also <p class="text-4xl hover:text-2xl">Dummy Content</p>

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

This works:

<div class="h-[200px]">
  <div class="hover:text-primary">Dummy Content</div>
</div>

<div class="h-[200px]">
  <div class="hover:text-primary">Dummy Content</div>
</div>

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

It's already working but I'm not sure why it does not work for group-hover

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

theme: {
    extend: {
      colors: {
        primary: "#ED1D24",
      }
    },
}

theme: {
    extend: {
      colors: {
        primary: "#ED1D24",
      }
    },
}

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

text-primary is a color I set up in my tailwind.config.js

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

Oh yeah, now that you mentioned it. I tried this and it worked:

<div class="group h-[200px]">
    <div class="group-hover:opacity-0">Dummy Content</div>
</div>

<div class="group h-[200px]">
    <div class="group-hover:opacity-0">Dummy Content</div>
</div>

but this doesn't work

<div class="group h-[200px]">
   <div class="group-hover:text-primary">Dummy Content</div>
</div>

<div class="group h-[200px]">
   <div class="group-hover:text-primary">Dummy Content</div>
</div>

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

I completely agree. I was mind blown that we can do that now. Right now, what Im only thinking if it has enough support and is safe to use.

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

I hover on the the parent and it applies style to the selected children. Even without hovering it directly.

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

As I need it too

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

I just dont understand right now why group and group-hover: doesnt work in my code

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

Thank you. And wow, I just realized :has is a plain css selector. I've searched it and it's amazing. I didnt have this the last timr I worked with css. Thank you so much for the help. This is what I exactly needed.

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

Thank you, I'll give it a try later. Do I have any prequisites or setups I should do, or does this work out of the box? Im using tailwind 3.4.4

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

Right now, I really hate how I did it because I wrote things in my css stylesheet for this ;_; Thank you for the response.

53 replies

KPCKevin Powell - Community

•Created by Nibelung Valesti on 7/2/2024 in #front-end

Tailwind CSS - Parent style when child is hovered

Thank you, but what if I want a specific class to be checked if it's hovered, does it go like this?

<section class="h-screen has-[.content:hover]:text-primary">
  <p class="content">Some dummy content</p>
</section>

<section class="h-screen has-[.content:hover]:text-primary">
  <p class="content">Some dummy content</p>
</section>

53 replies

Gaming

Programming