有人对如何使用顺风创建背景颜色更改悬停事件有建议吗？

Question

我有一些圆圈图像，我想为其创建背景颜色更改事件。我希望背景与每个图像的颜色相对应，但我对 tailwind 以及它如何不以相同的方式使用 classNames 仍然有点陌生。谁能告诉我创建这个的最佳方法是什么？他是我当前的图像代码。

技能.jsx

mport React from 'react'
import image1 from '../assets/images/html.png'
import image2 from '../assets/images/css.png'
import image3 from '../assets/images/javascript.png'
import image4 from '../assets/images/react.png'
import image5 from '../assets/images/typescript.png'
import image6 from '../assets/images/tailwind.png'


const Skills = () => {

    const images = [
        {
            id: 1, 
            img: image1,
            name: 'HTML 5'
        },
        {
            id: 2, 
            img: image2,
            name: 'CSS 3'
        },
        {
            id: 3, 
            img: image3,
            name: 'Javascript'
        },
        {
            id: 4, 
            img: image4,
            name: 'React'
        },
        {
            id: 5, 
            img: image5,
            name: 'Typescript'
        },
        {
            id: 6, 
            img: image6,
            name: 'Tailwind'
        },
    ]

  return (
    <div>
        <div className='grid grid-cols-3 gap-8 mt-10 m-auto max-sm:grid-cols-1 max-lg:grid-cols-2'>
            {images.map((image) => (
                <div key={image.id} className='h-full w-full flex flex-col items-center justify-center rounded-full p-2 mr-5 shadow-xl bg-neutral-50 '>
                    <img src={image.img} alt={image.name} className='w-4/12 h-4/12  my-5 justify-center items-center ' />
                    <h2 className=''>{image.name}</h2>
                </div>
            ))}
        </div>
    </div>
  )
}

export default Skills

希望能够将背景更改为与图像匹配的颜色。就像CSS的背景在悬停时变成蓝色一样。

Answer 1

简短回答：使用修饰符更改悬停时的背景颜色。

您可以将必要的 Tailwind 实用程序和所需的修饰符附加到列表中的元素，然后在渲染元素的循环中使用该属性。

例如，要使 CSS 的背景在悬停时变为蓝色，您可以使用以下命令：

// your list
{
  // ...
  name: 'CSS 3',
  class: 'hover:bg-blue-500'
}

// then inside the loop
<div className={`flex ${image.class}`}>

将来，请确保在您正在使用的库的文档中执行搜索。在这种情况下，在 Tailwind 网站上搜索“hover”即可找到解决方案，并附有示例。

最后，只是一个快速提示，用绝对或最高级（例如“最佳”）提出问题通常会很难回答，因此如果可能的话请避免使用它。