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内的悬停

1 个答案: