TAILWIND How To Ignore Tags
So I have
How do I apply the
hover-opacity:50 to the button tag only and not div class="dropdown-1"?24 Replies
Just set the button's class to hover:opacity-50
Since both button and div are in your li tag, both of them get applied with hover property, so just set the button element's class instead
An alternative method would be to use group-hover on the button (dont forget to add the "group" class to the li tag)
Or, my preferred method, would be to modify the li class to specify the hover for the button:
Or, my preferred method, would be to modify the li class to specify the hover for the button:
hover:[&>button]:opacity-50I might try this
Thats not what I want to do
The button must be set to opacity-50 but not the dropdown, and I want it on the
li tag
Doesn't workif you share your actual code, people won't have to guess at solutions because they can try them out first
bluddy no code is needed
š¤·
it's your own time you're wasting along with the rest of the people's that are helping you
When I hover on the green thing the opacity is 50
bluddy the code i shared is just an example
and that's why people's solutions don't work
dont tell me i need to share the whole source code š "a minimal rapresentation of your problem"
cause they dont understand what im trying to do?
I honestly don't care what you do, I'm just saying that if you share editable and live functional code, preferably a minimal representation of the issue you're having, then it's easier for people to help
and don't call me bluddy
get out of this convo
Ok bluddy
If you're just going to be disrespectful, try again in an hour. Enjoy the timeout.
your attitude is bad, and I dont' really want to answer the question, but the solution is instead of using opacity, to set transparency on the color of the object. you do that in tailwind by adding /5 or whatever opacity amount you are going for to the end of the color. look it up in the tailwind docs
All Jochen is trying to do is help you get a better quality answer, and nothing else, there is no reason to be rude about it.
You had a couple of people try to help, and neither of their solutions seemed to do it, probably because it was just off the top of their head without being able to try it out.
The reason it was suggested you share a minimal example with an actual working example is because that's going to get you a better answer. You can throw one together at https://play.tailwindcss.com/ without much effort, but you can't expect someone trying to help to make that effort. They're already going out of their way to help. The easier you make it for them to do that, the better.
You'll get quick answers because it's a quick question. If they have a minimal example they can play with, they'll use that before answering so it's normally something that works.
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
I would use <a> instead of <button>
And apply
hover:opacity-50 to <a> tag
By adding this class you will have hover on <a> tag onlyOk!
PlayCode.io
Tailwind CSS Playground
Try this online Tailwind CSS Playground playground with instant live preview and console. Easy & Fast. Experiment yourself.
As you can see the opacity becomes 50 when hovered on the dropdown aswell, but I want only the button to be set to
opacity-50. Problem is that: The li tag is set to px-[20px] py-[10px] while the button is not, and when that area its hovered the opacity will be 50 for both (Because the li is the parent element), is there a way to solve this (Not by removing the li/or set the opacity only to the button)?
As you can see when you hover on the area it sets the button's opacity to 50, but not the dropdown
I already told you how to fix it
hover:text-white/50 do this instead of using opacity
omg
tsym
š