react tailwind中想写一个hover上去生成after下划线。应该怎么写?下面我写的不生效
<div
className=' menu-item cursor-pointer inline-block mr-8 // hover:after:content-[""] // hover:after:mt-[-1.5rem] // hover:after:block // hover:after:bg-#3D3D3D // hover:after:h-0.5 // hover:after:w-full ' >
就是菜单鼠标移上 出现类似下边框
在 React 和 Tailwind CSS 中,你可以使用 hover
伪类来创建一个鼠标悬停时出现的样式效果。对于你的需求,你想要在鼠标悬停时显示一个下划线。你可以使用 after
伪元素来实现这个效果。
下面是一个示例代码,展示了如何在 React 和 Tailwind CSS 中实现这个效果:
import React from 'react';import { Link } from 'react-router-dom';const MenuItem = ({ to, children }) => ( <Link to={to}> <div className=" menu-item cursor-pointer inline-block mr-8 hover:text-black hover:bg-white hover:after:content-[""] hover:after:mt-[-1.5rem] hover:after:block hover:after:bg-black hover:after:h-0.5 hover:after:w-full" > {children} </div> </Link>);export default MenuItem;
在上面的代码中,我们创建了一个名为 MenuItem
的组件,它接受 to
和 children
作为属性。to
属性用于定义链接的目标地址,children
属性用于传递给组件的子元素。
在组件的内部,我们使用了 <Link>
组件来创建一个可点击的链接。我们为 <div>
元素添加了 hover
伪类的样式。这些样式包括 text-black
和 bg-white
,分别用于设置鼠标悬停时的文本颜色和背景颜色。另外,我们还使用了 hover:after:content-[""]
、hover:after:mt-[-1.5rem]
、hover:after:block
、hover:after:bg-black
、hover:after:h-0.5
和 hover:after:w-full
来设置鼠标悬停时的下划线样式。这些样式将生成一个黑色的下划线,位置在元素下方,宽度为容器宽度的 100%。
你可以根据需要调整这些样式的值,以达到你想要的效果。请确保在使用这些样式时,你已经正确地引入了 Tailwind CSS 并将其配置为适用于你的项目。
我想hover的时候子元素出现。tailwind应该咋写 就是实现一个鼠标放上去,出现一个遮罩层,然后有个删除的X. 加个group没问题了。我把map里面的提取成组件后,我hover其中一个元素,其他的元素也成block了。
场景是这样的,我们的单据新建页点击提交按钮后,拿到单据ID,然后根据单据ID触发工作流初始化接口获取到工作流人员信息。问题在于,点击提交后,该怎么展示选人比较好,一个弹框?或者在原有页面下新增选人信息?更或者关闭当前页,在另一个页面弹框选人?想听听各位的想法,你们业务上是怎么做的。
A设备利用startAbility拉起B设备的UIAbility时,A设备page里的代码如下: A设备UIAbility的onContinue如下: 我在startAbility时已经保存了参数,onContinue里还需要保存吗?如果需要,应该怎么写才能保存参数? 目前onContinue还没写,A设备startAbility时会报错,错误码401,官网文档错误码链接:通用错误码401
本文向大家介绍怎么编写一个集成测试?相关面试题,主要包含被问及怎么编写一个集成测试?时的应答技巧和注意事项,需要的朋友参考一下 当我们使用 Spring 应用去跑一个集成测试时,我们需要一个 ApplicationContext。 为了使我们开发更简单,SpringBoot 为测试提供一个注解 – @SpringBootTest。这个注释由其 classes 属性指示的配置类创建一个 Applic
导航栏返回事件 现有三个页面,A页面也就是工作台bench页面,B页面是列表页面,C是排查页面 在B页面 在C页面 现有这么一个问题:在C页面返回B页面之后,在B页面内调用handleBack方法时,返回的还是列表页面,如何才能直接返回A页面
vue2我这样写没问题,vue3,js版我改怎么写。