Stop and Start HTML Marquee on Mouse Over

Legacy <marquee> elements expose start() and stop() methods. Older pages often combine these methods with mouse events so scrolling pauses while the pointer is over the content and resumes when the pointer leaves.

<marquee id="scroll_news"
  onmouseover="this.stop();"
  onmouseout="this.start();">
  News 1 News 2 News 3 News 4
</marquee>

Pause Legacy Marquee on Mouse Over Top ↑

The original technique uses mouse events with the marquee's legacy stop() and start() methods. The following live example remains useful when maintaining old pages.

<marquee id="scroll_news"
  onmouseover="this.stop();"
  onmouseout="this.start();">
  News 1 News 2 News 3 News 4
</marquee>

See the existing JavaScript tutorial on mouse over and mouse out events for event basics.

Pause While the Mouse Button Is Held Top ↑

Older marquee pages can also pause while the pointer button is held down and resume on release.

<marquee
  onmousedown="this.stop();"
  onmouseup="this.start();">
  News 1 News 2 News 3 News 4
</marquee>

This is a legacy interaction example rather than a recommended control pattern. A dedicated Pause/Resume button is clearer and works beyond mouse-only interaction.

Links Inside Legacy Scrolling Text Top ↑

The original page demonstrates links inside moving content. Those links are preserved below, although continuously moving links can be harder to select and activate accurately.

<marquee onmouseover="this.stop();" onmouseout="this.start();">
  <a href="../php_tutorial/site_map.php">PHP</a> |
  <a href="../sql_tutorial/site_map.php">SQL</a> |
  <a href="../">plus2net Home</a>
</marquee>

Start and Stop a Legacy Marquee with Buttons Top ↑

The marquee DOM interface also exposes start() and stop(), so existing marquee code can be controlled with ordinary buttons.

<marquee id="scroll_news3">News items</marquee>

<button type="button"
  onclick="document.getElementById('scroll_news3').stop();">
  Stop Scrolling
</button>

<button type="button"
  onclick="document.getElementById('scroll_news3').start();">
  Start Scrolling
</button>

The original page also used getElementById() with one button whose label changed between Start and Stop. That approach can still be found in old code, but new components should separate state from the displayed label and expose control state accessibly.

Modern CSS: Pause Scrolling on Hover or Focus Top ↑

For a new ticker effect, use CSS animation instead of <marquee>. The animation-play-state property can pause the animation and resume it from the same point.

<div class="ticker">
  <div class="ticker-content">
    News 1 &nbsp; News 2 &nbsp; News 3
  </div>
</div>

<style>
.ticker {
  overflow: hidden;
}
.ticker-content {
  white-space: nowrap;
  animation: tickerMove 12s linear infinite;
}
.ticker:hover .ticker-content,
.ticker:focus-within .ticker-content {
  animation-play-state: paused;
}
@keyframes tickerMove {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
</style>

Hover support helps mouse users, while :focus-within can pause the animation when a keyboard user focuses a link or control inside the ticker. A visible button is still the clearest cross-input control when users need to stop motion.

Accessible Pause and Resume Button Top ↑

A button can toggle a CSS class instead of calling obsolete marquee methods.

<button type="button" id="tickerToggle" aria-pressed="false">
  Pause animation
</button>

<script>
const ticker = document.getElementById('tickerDemo');
const button = document.getElementById('tickerToggle');

button.addEventListener('click', () => {
  const paused = ticker.classList.toggle('is-paused');
  button.setAttribute('aria-pressed', paused ? 'true' : 'false');
  button.textContent = paused ? 'Resume animation' : 'Pause animation';
});
</script>

Accessibility and Reduced Motion Top ↑

Do not make hover the only way to pause important moving content. Keyboard, touch and assistive-technology users also need access to the information and controls. Important news or status text should remain available in a static form when motion is disabled.

@media (prefers-reduced-motion: reduce) {
  .ticker-content {
    animation: none;
    transform: none;
  }
}

For motion that is purely decorative, disabling the animation is usually better than forcing users to pause it manually.

Common Marquee Mouseover Mistakes Top ↑

Using marquee for a new ticker Top ↑

<marquee> and its start()/stop() interface are legacy features. Use CSS animation for new work.

Supporting only mouse hover Top ↑

Hover-only behavior does not provide an equivalent control for keyboard or touch users. Add focus behavior and, where useful, a visible pause control.

Putting important links in continuously moving content Top ↑

Moving targets are harder to read and activate. Keep essential navigation available outside the animation or ensure the motion can be paused easily.

Using obsolete presentation attributes Top ↑

Old marquee code often uses bgcolor and inline font styling. Use CSS for presentation when maintaining the page.

Changing a button label without exposing state Top ↑

If one button toggles animation state, update its accessible state as well as its visible text. aria-pressed is useful for a toggle button.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: