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:

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