How to Pause a Marquee on Hover
You can configure your CSS marquees so that they pause when the user hovers the cursor over it. Like this:
To do this, I've taken a normal CSS marquee and added the following code:
animation-play-state property allows you to use
paused as a value. By applying this to the
:hover pseudo class selector, you specify that it should only pause when the user hovers their cursor over the marquee. In this case, the moving element is the
<h3> element, so we use that as part of the selector.
Pause on Click
You can easily modify this functionality so that the marquee only stops when the user clicks on it.
We can do this using the
:active pseudo class selector instead of
:hover. Like this:
And here's the result: