检测悬停在 div 内

Question

我有一个 parent div，其中包含一个 child div。当用户将鼠标悬停在 parent div 上时 child div's 边框颜色和文本应变为白色。

我做了一个例子，文本颜色 No score, yet click and submit 的框应该变成白色，边框颜色也应该变成白色。

<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"/>

我怎么能检测到这个？（我用的是TailwindCss）

Answer 1

.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"/>

检测悬停在 div 内

Detect hover inside div

html

css

tailwind-css