html - 检测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"/>