The Group Hover feature in Tailwind CSS seems to only affect the initial SVG element and not any subsequent SVG children within the group

I encountered an issue with TailwindCSS (version 3.2.4) regarding group-hover, where hovering over elements with SVG child elements only seems to affect the first element and not the others.

For a demonstration, I have set up an example on the TailwindCSS playground here: https://play.tailwindcss.com/LgiQDbYH8K

When hovering over any of the elements, the caret SVG should appear. However, it only seems to work on the first element and not the second or third elements.

Interestingly, replacing the SVG with text resolves the issue. I have not tested with any other HTML elements.

I have tested this behavior on both Chrome and Firefox, with the same results.

javascripthtmlcsstailwind-css

Answer №1

This issue occurs because the ids are identical. I faced this dilemma on a previous project as well. It is crucial to assign unique ids and ensure they match in the URL clip-paths.

Below is the code snippet for reference:

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

Answer №2

In relation to a query by @Johan, it has been noted that the issue is attributed to duplicate IDs.

One way to circumvent this issue is by defining your icon once using a <symbol> and then referencing multiple instances using a <use> element - eliminating the need for renaming IDs.

/* Your CSS code here */
/* Additional CSS code */

You can also incorporate external references such as 

<use href="icons.svg#icon" />
, assuming the icon SVG is hosted on the same domain.

Check out this example on Tailwind play

By the way, your clip path seems to have no effect - you can safely remove it.

Answer №3

Dealing with a similar issue, I discovered that the root cause lies in the "id" attribute. Surprisingly, in my scenario, those "id" attributes were completely unnecessary.

Here's what I found:

  1. The SVG file itself contained unnecessary "id" attributes (multiple instances).
  2. These SVGs were integrated into Angular Material as "mat-icons" through matIconRegistry.addSvgIcon().

To resolve this issue, I opted to eliminate all "id" attributes (renaming them to "x-id" to retain their original purpose, since they were part of the vector editing process).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for serving images locally instead of using an online URL when exporting with Next.js static:

I've encountered an issue where multiple images pulled from an online source are not being included in my export when I start the process. The image URLs are stored as strings online, but I want them to be saved locally and exported that way instead o ...

javascriptreactjsnext.js

Learn how to incorporate the dynamic array index value into an Angular HTML page

Exploring Angular and facing a challenge with adding dynamic array index values in an HTML page. Despite trying different solutions, the answer remains elusive, as no errors are being thrown. In TypeScript, I've initialized an array named `months` wh ...

javascriptangular

What is the best way to mandate multiple input fields in AngularJS?

I am currently working on creating a basic web page with a few input fields that must be filled out to proceed. Below is the code I have so far: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/l ...

javascripthtmlangularjs

Using CSS to position elements absolutely while also adjusting the width of the div

In one section of my website, I have a specific div structure. This structure consists of two divs stacked on top of each other. The first div is divided into two parts: one part with a width of 63% and another part with a button. Beneath the first div, t ...

javascriptjqueryhtmlcss

Using AJAX to refresh a div upon submitting a form, instead of reloading the entire page

My SQL database generates a table that remains hidden until the search button is clicked to display the results. I want to use ajax to update the table without refreshing the entire page. Currently, when the page refreshes, the table reverts back to being ...

javascriptcssajaxhtml

Tips for modifying the border of an entire column in react-table

My goal is to adjust the style according to the screenshot below. This is what I expect: However, this is what I currently have: As you can see, the border bottom of the last column is not applied as expected. I have tried using the props provided by r ...

javascriptcssreactjsreact-table

Is it possible to seamlessly incorporate a square image into a bootstrap background image slider without having to crop the image?

I've exhausted all the different solutions I've come across on other platforms to resolve this issue, but I'm still unable to find a fix. So here's what I'm struggling with: The problem I'm facing involves finding the correct ...

htmlcsstwitter-bootstrap

Steps for deleting a game objectWould you like to learn how to

What is the process of creating an object that can eliminate itself automatically? var item = []; function selfDestruct() { this.destroy = () => { this = false; } } function initialization() { item[0] = new SelfDestruct(); item[0].destroy( ...

javascriptarrays

Error: Uncaught TypeError in Ajax function definition

I encountered an error in my code that says: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined The interesting thing is, when I remove the following part from my source file: delay(function(){ ... }, 1000); the code works ...

javascriptjqueryajax

Modifying multiple heading tags simultaneously with jQuery

Currently utilizing jQuery to append a string to all heading tags (h1, h2,..., h6) and display it on the screen. Seeking guidance specifically for the replacing aspect, and open to solutions using plain javascript as well. The code I have so far, which I ...

javascriptphphtmljqueryjson

Tips for seamlessly integrating full-size images into the slider?

I'm a beginner when it comes to CSS and I am having trouble fitting two images inside my first slider. My goal is to display the full images within the slider, but the width of the images exceeds that of the slider. Below is the CSS code for the slid ...

htmlcss

Highlighting the active nav-item in Bootstrap-5 is proving to be a challenge

I'm having trouble with the Bootstrap navbar. I want to change the color of the active nav-link, but it's not working as expected. I am currently using Bootstrap-5. Below is the CSS code I have: .nav-link { color: #666777; font-weight: 4 ...

htmlcssbootstrap-5

Setting constraints for table size with min-width and max-height

I have a coding dilemma involving the min-width and max-height properties in my table. The issue arises when I try to set these properties on the td element – they are being ignored by the browser. If I nest a div with the properties inside a td, the con ...

htmlcsshtml-table

jquery method for clearing input field values

I am facing an issue with the form where the company name field automatically loads a value, even though it is a required field. I simply want to clear the previous loaded value and allow the user to input their information. For example, if I previously e ...

javascriptphpjquerywordpress

Is there a way to restrict access to my website to only be opened in the Chrome browser?

Is there a way to prevent my web application from loading when the link is opened in browsers other than Chrome? Can this be achieved using Javascript or Java? I want to restrict the usage of my web application to only Chrome. Any assistance would be appre ...

javascriptcsshtml

Which is better: specifying Node.js version with nvmrc or in package.json engines

Ensuring that other developers working on my JavaScript project use specific versions of node and npm is important to me. I recently added the following code snippet to my package.json file: "engineStrict" : true, "engines": { "node" : "10.10.0", ...

javascriptnode.jsnpmpackage.json

Additional white space beyond the visible region

There's a peculiar bug I'm encountering which results in extra spacing on the body or html element. This additional space isn't visible within the normal browsing area of most browsers, only becoming apparent when scrolling to the right side ...

csshtmlwordpress

Incorporate personalized buttons into your Slick Carousel

Looking to add custom previous and next buttons to a slick carousel? I attempted using a background image on the .slick-prev and .slick-next CSS classes, as well as creating a new class following the documentation, but unfortunately, the arrows disappeared ...

javascriptcssslick.js

Transferring information to a function

I'm looking for a way to pass the variable Date to my function HasBtnRights(). Does anyone have suggestions on how I can achieve this? <asp:TemplateField HeaderText="More info" Visible='<%#HasBtnRights(Eval("Date")) %>'> < ...

htmlasp.net

Is it possible to create a website with a single session for all users using JavaScript

Greetings everyone, I am excited to be posting for the first time on stackoverflow. After dedicating a week to learning javascript and achieving some things I am proud of, I have hit a roadblock. As a self-learner, I kindly ask for your understanding. Cur ...

javascripthtml