search

chromaui / storybook-addon-pseudo-states

CSS pseudo-classes for Storybook
MIT License
88 stars 28 forks source link

Targeting specific elements doesn't create hover effects from nested elements #88

Open StuDownie opened 12 months ago

StuDownie commented 12 months ago

Vue 3.3.4, Tailwind 3.3.3, Storybook 7.4.1 and Pseudo-states 2.1.1

Hover states have disappeared from all our snapshots where we use this method:

  parameters: {
    pseudo: {
      hover: ".showHover",
    },
  },

This example won't work:

  <div class="showHover">
    <code class="hover:bg-red-300">Pseudo test</code>
  </div>

But this will

   <code class="showHover hover:bg-red-300">Pseudo test</code>

Because we're applying showHover to components, they have many nested div's, so nothing is working. However, using the Pseudo States toolbar works correctly.