Member Avatar for marjan_m

Hi,

I want to know that how a moving link can be stopped whn the mouse over event occur.I want to perform it in dreamweaver.

Waiting for ur urgent reply.

Regards,

  • 3 Contributors
  • 5 Replies
  • 118 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short summary and modern fix

wanted the moving link to stop when the mouse hovers. The marquee solution posted by does work in some browsers, but as noted the <marquee> element is obsolete and inconsistent across browsers (see the MDN note on <marquee>). A simple, standards-based alternative is CSS animation with animation-play-state set to paused on hover. That keeps the behavior (pause-on-hover) while remaining cross-browser friendly and easier to control.

Example (HTML + CSS — paste into Dreamweaver Code view and test in Live View):

<div class="scroll-wrap">
  <div class="scroller"><a href="#">Example scrolling link</a></div>
</div>

<style>
.scroll-wrap { overflow: hidden; white-space: nowrap; }
.scroller { display: inline-block; padding-left: 100%; animation: scroll 10s linear infinite; }
.scroll-wrap:hover .scroller,
.scroll-wrap:focus-within .scroller { animation-play-state: paused; }

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .scroller { animation: none; }
}
</style>

Notes and troubleshooting

  • The timing and start/end offsets may need tweaking for content width differences; adjust padding-left and animation duration accordingly.
  • For finer control (variable speeds, pause/resume programmatically), use a small JS loop with requestAnimationFrame.
  • Always test in real browsers (not just Dreamweaver preview) and include a prefers-reduced-motion fallback for accessibility (see prefers-reduced-motion).

Bottom line: the marquee quick-fix works (as showed) but migrating to CSS or JS is the recommended, future-proof approach (as suggested).

Recommended Answers

All 5 Replies

Member Avatar for Member #114696

Like thi

<marquee onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=10"><a href="#">Hello World</a></marquee>
Member Avatar for MidiMagic

Marquee is a nonstandard IE extension that doesn't work in other browsers. It is deprecated.

Member Avatar for marjan_m

Marquee is a nonstandard IE extension that doesn't work in other browsers. It is deprecated.

then wht to use instead marque??

Member Avatar for marjan_m

Like thi

<marquee onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=10"><a href="#">Hello World</a></marquee>

Thankx for ur guidence.its resolved

Member Avatar for MidiMagic

then wht to use instead marque??

There is no standard html for that. You have to use a script.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.