CODEWITHSUNDEEP
cssreactjstailwind-css
Ramesh Kumar
Ramesh Kumar

Reputation: 197

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

How to get a circle background color on hover over the three horizontal dots in tailwind css?

Sample Code:

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;

Upvotes: 0

Views: 3027

Answers (1)

Vinicius Cainelli
Vinicius Cainelli

Reputation: 1004

You can change the parent element background, and if you want to change the color, just add fill="currentColor" on the SVG element.

Something like this.

      <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>

You can check quickly on the Tailwind playground https://play.tailwindcss.com/azLEEd0RUu

Upvotes: 1

Related Questions