将鼠标悬停在具有三个水平点的 div 上时的顺风圆圈背景颜色

Question

如何在 tailwind 中将鼠标悬停在三个水平点上时获得圆形背景色 css？

示例代码：

const Header = () => {
  return ( 
      <div className="flex px-4 py-4">
        <div className="mr-auto font-bold text-md mb-2">The Coldest Sunset</div>
        <div className="text-sm align-middle">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6 hover:bg-blue-200 hover:rounded-full"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
            />
          </svg>
        </div>
      </div>
  );
};

export default Header;

Answer 1

您可以更改父元素背景，如果要更改颜色，只需在 SVG 元素上添加 fill="currentColor"。

像这样。

      <div class="flex px-4 py-4">
        <div class="mr-auto font-bold text-md mb-2">The Coldest Sunset</div>
        <div class="text-sm align-middle group hover:bg-blue-200 rounded-full w-8 h-8 flex items-center justify-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            fill="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
            />
          </svg>
        </div>
      </div>

你可以在Tailwind playground上快速查看 https://play.tailwindcss.com/azLEEd0RUu

将鼠标悬停在具有三个水平点的 div 上时的顺风圆圈背景颜色

Tailwind Circle background color on hover over a div with three horizontal dots

css

reactjs

tailwind-css