Hover Over to Pause Marquee

Question

I want to create a Marquee that scrolls some news articles but when the user hovers over it I need it to pause and when the user hovers out of it (onMouseOut) I need to ti start back up. This did not work:

<marquee onMouseOver="this.stop()" onMouseOut="this.start()">Text</marquee>

Does anyone have any suggestions on how I can achieve this in a minimal amount of code?

Answer 1

<marquee onmouseover="this.stop();" onmouseout="this.start();">
my text here
</marquee>

You're using wrong case: onMouseOver,onMouseOut

Answer 2

The marquee tag has an attribute called scrollamount which controls how fast it goes. All we need to do is set the value to 0 when we hover in and set it back to 5 when we mouse out.

DEMO: http://jsfiddle.net/U9yFj/

$(function() {
    $('marquee').mouseover(function() {
        $(this).attr('scrollamount',0);
    }).mouseout(function() {
         $(this).attr('scrollamount',5);
    });
});