CODEWITHSUNDEEP
htmlcsstailwind-css
Jenssen
Jenssen

Reputation: 1871

Detect hover inside div

I have a parent div that contains a child div. When a user hovers over the parent div The child div's border color and text should become white.

I've made an example the box with No score, yet click and submit text color should become white and the border color white aswel.

<div class="flex w-full p-4">
    <div class="flex hover:bg-black hover:text-white text-black p-2 rounded cursor-pointer items-center w-full">
        <div class="w-1/2">
            <h4>🚻 RESTROOM</h4>
        </div>

        <div class="flex flex-wrap xs:w-full xs:mt-2 md:mt-0 w-1/2 py-4 border-black border-2 rounded relative">
            <span class="flex items-center text-black text-xs font-bold uppercase h-full pin-t absolute ml-2">
                No score yet, click and submit
            </span>
        </div>
    </div>
</div>
    
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

How could I detect this? (I use TailwindCss)

Upvotes: 1

Views: 364

Answers (1)

doğukan
doğukan

Reputation: 27451

.flex:hover .text-black {
  color:#fff;
}

.flex:hover .border-black {
  border-color:#fff;
}
<div class="flex w-full p-4">
    <div class="flex hover:bg-black hover:text-white text-black p-2 rounded cursor-pointer items-center w-full">
        <div class="w-1/2">
            <h4>🚻 RESTROOM</h4>
        </div>

        <div class="flex flex-wrap xs:w-full xs:mt-2 md:mt-0 w-1/2 py-4 border-black border-2 rounded relative a1">
            <span class="flex items-center text-black text-xs font-bold uppercase h-full pin-t absolute ml-2">
                No score yet, click and submit
            </span>
        </div>
    </div>
</div>
    
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

Upvotes: 2

Related Questions