Обнаружить зависание внутри div - PullRequest
Новая
       7

Обнаружить зависание внутри div

0 голосов
/ 25 ноября 2018

У меня есть 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 )

1 Ответ

0 голосов
/ 25 ноября 2018 

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