悬停时显示顺风元素，但放置在左上方和右上方时通常不显示
[英]tailwind elements showing on hover but not normally when placed at top left and right
问题描述
我正在尝试制作一张在悬停时扩展并显示一些额外元素的卡片，但是在悬停之前我想要的一些元素没有出现，但它们在悬停时会显示？
import { CashIcon, ArrowRightIcon } from '@heroicons/react/solid'
import {ClockIcon} from '@heroicons/react/outline'
import { BsTelegram, BsTwitter } from "react-icons/bs"
const people = [
{
name: 'Jane Cooper',
title: 'Ethereum',
role: '$5',
email: 'janecooper@example.com',
telephone: '+1-202-555-0170',
isExpired: true,
timeLeft:'5hrs Left',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
},
{
name: 'Jane Cooper',
title: 'Binance',
role: '$5',
email: 'janecooper@example.com',
telephone: '+1-202-555-0170',
isExpired: true,
timeLeft:'5hrs Left',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
}
// More people...
]
export default function FeaturedDrops() {
return (
<ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{people.map((person) => (
<li key={person.email} className="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200 group hover:scale-110 hover:bg-slate-100 hover:transition ease-linear duration-500">
<div className="w-full flex items-center justify-between p-6 space-x-6 translate-y-0 group-hover:translate-y-1 transition duration-300 group-hover:overflow-hidden ">
<div className="flex-1 truncate">
<div className="flex items-center space-x-3">
<h3 className="text-gray-900 text-sm font-medium truncate">{person.name}</h3>
<span className="flex-shrink-0 flex px-2 py-0.5 text-green-800 text-xs font-medium bg-green-100 rounded-full">
<CashIcon className='w-4 h-4 text-green-500' aria-hidden="true" />
<span className='mr-2 ml-1 text-gray-500 font-bold'>
{person.role}
</span>
</span>
</div>
<span className="flex-shrink-1 flex px-2 w-24 mt-2 py-0.5 text-green-800 text-xs font-medium bg-blue-200 rounded-full">
<CashIcon className='w-4 h-4 text-green-500' aria-hidden="true" />
<span className='ml-1 text-gray-500 font-bold'>
{person.title}
</span>
</span>
</div>
<img className="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src={person.imageUrl} alt="" />
</div>
<div className='invisible group-hover:visible transition ease-in duration-100'>
<div className="-mt-px flex divide-x divide-gray-200 ">
<div className="w-0 flex-1 flex ">
<a
href={`mailto:${person.email}`}
className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
>
<BsTwitter className="w-5 h-5 text-gray-400" aria-hidden="true" />
<span className="ml-3">Twitter</span>
</a>
</div>
<div className="-ml-px w-0 flex-1 flex ">
<a
href={`tel:${person.telephone}`}
className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
>
<BsTelegram className="w-5 h-5 text-gray-400" aria-hidden="true" />
<span className="ml-3">Telegram</span>
</a>
</div>
</div>
</div>
<div className=' group-hover:visible transition ease-in duration-100'>
<div className="-mt-px flex divide-x divide-gray-200 ">
<div className="w-0 flex-1 flex ">
<a
href={`mailto:${person.email}`}
className="relative bg-green-400 -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
>
<span className="ml-3">Go To Airdrop</span>
<ArrowRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</a>
</div>
</div>
</div>
<div className='absolute top-0 right-0 h-5 w-16 bg-red-400 flex items-center text-white justify-center'>{person.isExpired ? <p className=''>expired</p> : <></>}</div>
<div className='absolute top-0 left-0 h-5 w-20 bg-white flex items-center justify-center font-medium text-xs group-hover:pb-0 group-hover:transition duration-300'>
<ClockIcon className='w-4 h-4 text-gray-600' aria-hidden="true" />
{person.timeLeft}
</div>
</li>
))}
</ul>
)
}
我认为这是因为带有人员信息的容器存在一些隐藏的填充问题。 另外，我们如何消除信息容器之间的间隙并在未悬停时转到容器，因为现在元素显示在悬停时并在悬停后不可见但仍占用空间？
1 个解决方案
解决方案1
1 已采纳 2022-06-27 16:46:32
假设是徽章（timeLeft，isExpired），需要添加相对于列表项的位置，使徽章包含在列表项中。
import { CashIcon, ArrowRightIcon } from '@heroicons/react/solid'
import {ClockIcon} from '@heroicons/react/outline'
import { BsTelegram, BsTwitter } from "react-icons/bs"
const people = [
{
name: 'Jane Cooper',
title: 'Ethereum',
role: '$5',
email: 'janecooper@example.com',
telephone: '+1-202-555-0170',
isExpired: true,
timeLeft:'5hrs Left',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
},
{
name: 'Jane Cooper',
title: 'Binance',
role: '$5',
email: 'janecooper@example.com',
telephone: '+1-202-555-0170',
isExpired: true,
timeLeft:'5hrs Left',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
}
// More people...
]
export default function FeaturedDrops() {
return (
<ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{people.map((person) => (
<li key={person.email} className="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200 group hover:scale-110 hover:bg-slate-100 hover:transition ease-linear duration-500 relative">
<div className="w-full flex items-center justify-between p-6 space-x-6 translate-y-0 group-hover:translate-y-1 transition duration-300 group-hover:overflow-hidden ">
<div className="flex-1 truncate">
<div className="flex items-center space-x-3">
<h3 className="text-gray-900 text-sm font-medium truncate">{person.name}</h3>
<span className="flex-shrink-0 flex px-2 py-0.5 text-green-800 text-xs font-medium bg-green-100 rounded-full">
<CashIcon className='w-4 h-4 text-green-500' aria-hidden="true" />
<span className='mr-2 ml-1 text-gray-500 font-bold'>
{person.role}
</span>
</span>
</div>
<span className="flex-shrink-1 flex px-2 w-24 mt-2 py-0.5 text-green-800 text-xs font-medium bg-blue-200 rounded-full">
<CashIcon className='w-4 h-4 text-green-500' aria-hidden="true" />
<span className='ml-1 text-gray-500 font-bold'>
{person.title}
</span>
</span>
</div>
<img className="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src={person.imageUrl} alt="" />
</div>
<div className='invisible group-hover:visible transition ease-in duration-100'>
<div className="-mt-px flex divide-x divide-gray-200 ">
<div className="w-0 flex-1 flex ">
<a
href={`mailto:${person.email}`}
className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
>
<BsTwitter className="w-5 h-5 text-gray-400" aria-hidden="true" />
<span className="ml-3">Twitter</span>
</a>
</div>
<div className="-ml-px w-0 flex-1 flex ">
<a
href={`tel:${person.telephone}`}
className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
>
<BsTelegram className="w-5 h-5 text-gray-400" aria-hidden="true" />
<span className="ml-3">Telegram</span>
</a>
</div>
</div>
</div>
<div className=' group-hover:visible transition ease-in duration-100'>
<div className="-mt-px flex divide-x divide-gray-200 ">
<div className="w-0 flex-1 flex ">
<a
href={`mailto:${person.email}`}
className="relative bg-green-400 -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
>
<span className="ml-3">Go To Airdrop</span>
<ArrowRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</a>
</div>
</div>
</div>
<div className='absolute top-0 right-0 h-5 w-16 bg-red-400 flex items-center text-white justify-center'>{person.isExpired ? <p className=''>expired</p> : <></>}</div>
<div className='absolute top-0 left-0 h-5 w-20 bg-white flex items-center justify-center font-medium text-xs group-hover:pb-0 group-hover:transition duration-300'>
<ClockIcon className='w-4 h-4 text-gray-600' aria-hidden="true" />
{person.timeLeft}
</div>
</li>
))}
</ul>
)
}
Chart.js 当您在甜甜圈的左/右上方使用 hover 时，甜甜圈图表未显示工具提示
[英]Chart.js doughnut chart isn't showing tooltip when you hover over the left/right of the doughnut
在 Tailwind 和 React 顶部显示子菜单时如何保持 div 大小
[英]How to keep div size when showing submenu on top Tailwind and React
当元素置于负数位置时，如何使页面向左滚动？
[英]How to make the page to scroll to the left when elements placed in a negative position?
将工具提示悬停在页面右侧时，将其跨度调整到左侧
[英]realign tooltip-span to the left when it hover to the right side of the page
在AngularJS中显示/隐藏动画时向左/向右滑动动画/ ngAnimate
[英]Animating sliding left/right when showing/hiding in AngularJS / ngAnimate
如何将div项放到jQuery Slider中，并使用Left-Right滑块显示最少5个元素以查看更多元素？
[英]How to place div items into jQuery Slider showing a minimum of 5 elements with Left-Right slider to view more elements?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
悬停的不同悬停效果来自：左，右，顶部，底部
Chart.js 当您在甜甜圈的左/右上方使用 hover 时，甜甜圈图表未显示工具提示
javascript将鼠标悬停在图像上并显示左上到右下
在 Tailwind 和 React 顶部显示子菜单时如何保持 div 大小
当元素置于负数位置时，如何使页面向左滚动？
以向上 - >向左 - >向右的方式定位元素
将工具提示悬停在页面右侧时，将其跨度调整到左侧
悬停以左右移动滑块
在AngularJS中显示/隐藏动画时向左/向右滑动动画/ ngAnimate
如何将div项放到jQuery Slider中，并使用Left-Right滑块显示最少5个元素以查看更多元素？
相关标签