WIP: Slider (Nestable) Arrow Hover Color Not Applied Correctly

[RicoGL]

When styling slider arrows, the hover color for the icon doesn’t apply.

Generated CSS

#brxe-xxxxxx .splide__arrow {
  background-color: white;
  color: black;
}

#brxe-xxxxxx .splide__arrow svg {
  fill: black;
}

#brxe-xxxxxx .splide__arrow:hover {
  background-color: white;
  color: red;
}

Problem
The SVG has a fixed fill: black, so it overrides the color on hover.

Expected
Icon color should change on hover.

Fix suggestion
Either:

.splide__arrow svg {
  fill: currentColor;
}

or:

#brxe-xxxxxx .splide__arrow:hover svg {
  fill: red;
}

[shingen]

Works fine at this end. Do you have any additional plugins or custom CSS that might be conflicting?

Video: Watch Styles-–-Made-by-Shingen | Streamable

[timmse]

Hi Rico,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue with the default or custom arrows.

Could you please share the SVG file and a link to the website where the problem can be seen?
That would be a big help!

Best regards,
timmse

[RicoGL]

Could you try using these settings? Make sure the box is larger than the icon itself.

[timmse]

But the size has nothing to do with the fill color… Please provide me with the SVG file and a link to the site where the problem is visible.

[RicoGL]

@RicoGL

Make sure the box is larger than the icon itself.

The issue is that the fill is applied to the SVG. But the hover color to the parent .splide__arrow.

So If you make the parent larger (in my example 3rem) than the SVG (in my example 1.5rem) you will see the issue.

[timmse]

Aaaaaah, now I understand Thanks so much!

To put it simply: the SVG color should change when hovering over .splide__arrow, not when hovering over the SVG itself, even if the SVG does not have a fill or stroke=“currentColor” attribute.

We’ll update this thread once it’s fixed

[RicoGL]

Thank you very much for the investigation!

I have temporarily solved it with:

%root% .splide__arrow svg {
  fill: currentColor !important;
}