Search code examples
javascripthtmlcsstailwind-css

Tailwind CSS Group Hover with SVG children only works on the first element and not remaining children

I've run into this issue with TailwindCSS (version 3.2.4) group-hover where group hovering elements with SVG children only seems to work on the first element, and not the remaining elements.

I've created an example on the TailwindCSS playground here: https://play.tailwindcss.com/LgiQDbYH8K

Hovering over any of the elements should make the caret SVG appear. This seems to happen on the first element, but not the second or third elements.

Replacing the SVG with text makes it work again. I haven't tried any other HTML elements.

Tested on Chrome and Firefox, same result.

Solution

  • This happens because ids are the same. It made me lose my mind on a project too. You have to give unique ids and set the same in urls clip-paths

    Here is the code :

    <div>
  <div class="group/result cursor-pointer p-10">
    <div class="invisible absolute group-hover/result:visible">
      <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
        <g clip-path="url(#mysvgone)">
          <path d="M5.757 24c-.414 0-1.036-.207-1.243-.622-.622-.622-.415-1.658.207-2.28l10.983-9.118L4.721 2.862c-.622-.622-.829-1.658-.207-2.28.621-.621 1.658-.828 2.28-.207l12.433 10.362c.415.414.622.829.622 1.243 0 .415-.207 1.037-.622 1.244L6.793 23.585A1.582 1.582 0 0 1 5.757 24Z"></path>
        </g>
        <defs>
          <clipPath id="mysvgone">
            <path fill="#fff" d="M0 0h24v24H0z"></path>
          </clipPath>
        </defs>
      </svg>
    </div>
    <div>Test 1</div>
  </div>
  <div class="mx-8 border-b border-neutral-300"></div>
  <div class="group/result cursor-pointer p-10">
    <div class="invisible absolute group-hover/result:visible">
      <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
        <g clip-path="url(#mysvgtwo)">
          <path d="M5.757 24c-.414 0-1.036-.207-1.243-.622-.622-.622-.415-1.658.207-2.28l10.983-9.118L4.721 2.862c-.622-.622-.829-1.658-.207-2.28.621-.621 1.658-.828 2.28-.207l12.433 10.362c.415.414.622.829.622 1.243 0 .415-.207 1.037-.622 1.244L6.793 23.585A1.582 1.582 0 0 1 5.757 24Z"></path>
        </g>
        <defs>
          <clipPath id="mysvgtwo">
            <path fill="#fff" d="M0 0h24v24H0z"></path>
          </clipPath>
        </defs>
      </svg>
    </div>
    <div>Test 2</div>
  </div>
  <div class="mx-8 border-b border-neutral-300"></div>
  <div class="group/result cursor-pointer p-10">
    <div class="invisible absolute group-hover/result:visible">
      <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
        <g clip-path="url(#mysvgthree)">
          <path d="M5.757 24c-.414 0-1.036-.207-1.243-.622-.622-.622-.415-1.658.207-2.28l10.983-9.118L4.721 2.862c-.622-.622-.829-1.658-.207-2.28.621-.621 1.658-.828 2.28-.207l12.433 10.362c.415.414.622.829.622 1.243 0 .415-.207 1.037-.622 1.244L6.793 23.585A1.582 1.582 0 0 1 5.757 24Z"></path>
        </g>
        <defs>
          <clipPath id="mysvgthree">
            <path fill="#fff" d="M0 0h24v24H0z"></path>
          </clipPath>
        </defs>
      </svg>
    </div>
    <div>Test 3</div>
  </div>
</div>