tailwindcss怎么在hover内改变内部元素的样式?

上面是原状态,下面是鼠标放上去的状态,我想叫下面的鼠标放上去文字变成白成,这个用tailwindcss怎么实现,都是在class里写,怎么实现呀??
image.png
image.png

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl cursor-pointer shadow-md flex items-center space-x-4 hover:bg-gray-700">
        <div class="flex-shrink-0">
          <img class="h-12 w-12" src="@/assets/imgs/logo.png">
        </div>
        <div>
          <div class="text-xl font-medium text-black">ChunShu</div>
          <p class="text-gray-500">You have a new message</p>
        </div>
    </div>
阅读 4.1k
1 个回答

Group-hover

如果您需要当鼠标悬停在一个指定的父元素上时对其子元素设置样式,给父元素添加 group 类,并且为子元素的功能类添加 group-hover: 前缀。

<div class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent ...">
 <p class="text-indigo-600 group-hover:text-gray-900 ...">New Project</p>
 <p class="text-indigo-500 group-hover:text-gray-500 ...">Create a new project from a variety of starting templates.</p>
</div>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏