How to Stop a Marquee on Mouseover Using CSS?

The <marquee> tag in HTML allows scrolling text or images across the screen. However, sometimes you may want to pause the marquee when the user hovers over it for better readability. While JavaScript provides one way to achieve this, CSS alone can also be used to control marquee behavior.

In this blog, we’ll explore how to stop a marquee on mouseover using CSS effectively.

1. Using animation-play-state to Pause on Hover

If you’re using CSS animations instead of the deprecated <marquee> tag, the best way to stop the animation on hover is by using the animation-play-state property.

Example: Pausing a Marquee on Hover (CSS Only)

@keyframes marquee {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

.marquee {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    animation: marquee 5s linear infinite;
}

.marquee:hover {
    animation-play-state: paused; /* Stops movement on hover */
}

<div class="marquee">Hover over this text to pause the marquee effect.</div>

✅ This method is modern, CSS-only, and works well across browsers.

2. Pausing the Deprecated <marquee> Tag on Hover

Although the <marquee> tag is outdated, some websites still use it. You can use the onmouseover and onmouseout attributes to pause and resume the scrolling.

Example: Using onmouseover and onmouseout

<marquee onmouseover="this.stop();" onmouseout="this.start();">
    Hover over this text to pause the marquee.
</marquee>

✅ This method is simple but relies on inline JavaScript.

3. Using CSS for <marquee> (Limited Support)

While CSS cannot directly control the <marquee> tag, some browsers support marquee:hover { animation-play-state: paused; }. However, it’s not reliable across all browsers.

To future-proof your website, it’s best to use CSS animations instead of <marquee>.

Conclusion

To stop a marquee on hover, use one of the following methods:

✅ Use animation-play-state: paused; in CSS for a modern approach.
✅ Use onmouseover="this.stop();" for the <marquee> tag (but avoid using <marquee> in new projects).
✅ Switch to CSS animations for better performance and browser compatibility.