(Tailwind - DaisyUI) 有没有办法改变下拉项目的悬停和活动颜色？

Posted 2023-03-07

【中文标题】(Tailwind - DaisyUI) 有没有办法改变下拉项目的悬停和活动颜色？

【英文标题】：(Tailwind - DaisyUI) Is there anyways to change hover and active colors of dropdown items?

【发布时间】：2021-11-28 06:03:21

【问题描述】：

我使用 TailwindCSS 和 DaisyUI（通过 CDN）。

当使用DaisyUI Dropdown 时，有什么方法可以改变下拉项的颜色吗？这包括下拉菜单本身的背景颜色，然后将鼠标悬停在项目上 (CSS :hover)，然后单击它 (CSS :active)。

（点击时）

到目前为止，我已经能够更改下拉菜单本身和悬停时的背景颜色。

<div class="dropdown">
    <div tabindex="0" class="m-1 btn clickables btn-green shadow">
        <p class="text-medium">Testing</p>
    </div>
    <ul tabindex="0" class="p-2 shadow menu dropdown-content bg-white text-black rounded-box w-52 text-sm">
        <li class="rounded hover:bg-gray-300 dropdown-active">
            <a href="page-one.html">Protecting your privacy</a>
        </li>
    </ul>
</div>

单击列表时我似乎无法获取颜色（CSS 活动）：

.dropdown-active:active 
   background-color: #0B6339 !important; 

【参考方案1】：

您可以通过为 DaisyUI 定义自定义主题颜色来实现。

将此块添加到tailwind.config.js 并根据您的需要编辑颜色：

daisyui: 
    themes: [
      
        'mytheme': 
          'primary': '#570df8',
          'primary-focus': '#4506cb',
          'primary-content': '#ffffff',
          'secondary': '#f000b8',
          'secondary-focus': '#bd0091',
          'secondary-content': '#ffffff',
          'accent': '#37cdbe',
          'accent-focus': '#2aa79b',
          'accent-content': '#ffffff',
          'neutral': '#3d4451',
          'neutral-focus': '#2a2e37',
          'neutral-content': '#ffffff',
          'base-100': '#ffffff',
          'base-200': '#f9fafb',
          'base-300': '#d1d5db',
          'base-content': '#1f2937',
          'info': '#2094f3',
          'success': '#009485',
          'warning': '#ff9900',
          'error': '#ff5724',
        ,
      ,
    ],
  ,

然后像 Tailwind 的颜色名称一样使用颜色类名称。

<li class="hover:bg-secondary-focus">
  <a>Item 1</a>
</li>

【讨论】：

然而，这是最佳答案，因为由于分配要求，我的网站没有在 node.js 或服务器上运行。我只是使用 CDN（没有配置）。我有什么方法可以在不使用tailwind.config.js 的情况下做到这一点？