Level 102
Yes a child element cannot change the style of the parent with css. If you need that to happen you will need JS (change the class using livewire perhaps?)
Aug 4, 2020
7
Level 10
Tailwind CSS Hover state in div with span ?
Hello
Question relating to the "hover over" within a single div.
The desired outcome is for both text blocks to change colour when you hover over either element.
I have the following html : (it is a livewire component).
<div class="hover:text-blue-600 text-gray-500">
#1 Grey Text - Blue on Hover
<span class="hover:text-red-600 text-gray-500">
#2 Gray text - Red on Hover
</span>
</div>
Hover over text #1 it turns Blue.
Hover over #2 it turns Red, and #1 turns Blue.
Okay - I think I may realise the issue after preparing this post, so I will leave it here for comment rather than deleting it.
I guess the child passes to the parent, but not the other way. Back to the manual.
Level 47
group hover
Level 102
Group hover is parent to child so yes that will get one direction working.
If parent is hovered, change the child as well. As I understand it, hovering the child, should change the parent as well?
Level 47
i think so
Level 10
Thanks Guys - Group hover looks like it will be the solution. But it is a little strange, hover child#2 it changes both, hover parent#1 no change to #2. One would have expected Parent controlling child, not the other way around. Appreciate your help.
Level 122
You have to think in terms of nested elements.
When you hover over #1 you are only on that parent div so only that text is blue.
When you hover over #2 you are simultaneously hovering over both the div and the span so #2 is red and #1 is blue.
Perfectly logical.
If you had hover state on the parent of the div (eg the body) then the body would be affected also - not because the child is controlling the parent, but because in the elements stacked on the page, you are hovering over all at the same time.
Level 10
Snapey - Thank you - when it's explained like that it now appears very logical.
Please or to participate in this conversation.