Slider button remains in the active state

Support
#1

Hello,
in Pro I have trigger buttons for sliders to trigger a left or right switch. These work as expected, however, the last clicked button remains in the active (mouseover) state, even when the mouse is no longer hovering.
Could you please advice, what to check to have the normal button behaviour?

The buttons are components, and as I understand it, they should have the custom attributes “data-x-slide-prev” and “data-x-slide-next”. This adds the #next and #prev arguments to the URL like an anchor. Could this be the cause?

#2

Hi @Daryl_Shaw,

Thanks for reaching out.
I have checked the page and found that the slider and navigation are working as expected. And the active state for navigation is also working fine. Can you please provide any screenshots marked with the issue or any video that helps us to recognize the problem?

Thanks

#3

Thanks for quick response!
See link to screen video attached:
If I hover over the unclicked buttons first time it works as expected.
After clicking a button (left or right) it remains in active state (due to adding the anchor in url?)

#4

Hello @Daryl_Shaw,

I have checked the issue on my end and everything appears to be working correctly at the moment when tested with Google Chrome browser version 142.0.7444.60. Sometimes, problems like this can be caused by cached data in your browser. I recommend purging your site cache if possible, clearing your browser cache, and then trying again. Alternatively, you can also check the site in an incognito or private browsing window.

Thanks

#5

Ok, thanks for investigating. Please understand my problem again precisely. You can also recognize it in your own screen video:
When you remove the mouse pointer from the buttons, the fill color for the interaction state (rgba(127, 151, 209, 0.5)) remains active. However, the button should return to its normal state (rgba(255, 255, 255, 0.2)) as soon as the mouse pointer is removed.

#6

Hello @Daryl_Shaw,

I would suggest you go to the Swipe component-> customization -> element CSS.

$el .x-anchor.x-currently-active {
    background-color: transparent !important;
}
$el .x-anchor.x-currently-active:hover {
    background-color: rgba(127, 151, 209, 0.5) !important;
}

_-Swipe-Component-Cornerstone-10-31-2025_09_54_PM
_-Swipe-Component-Cornerstone-10-31-2025_09_54_PM1846×834 76.5 KB

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding, you can subscribe to One, where customization questions are answered.

Hope it helps
Thanks

#7

Yes, that solves it, thank you very much!
But just to be clear: shouldn’t the behavior on mouseover and “mouseout” be like this by default? Without custom CSS?

#8

Hello @Daryl_Shaw,

Glad that we were able to help you.

Thanks