2 months ago

Tailwind CSS Hover state in div with span ?

Posted 2 months ago by rotorbit69


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

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.

Please sign in or create an account to participate in this conversation.