Search code examples
htmlhovermarquee

Change marquee speed with hover (HTML)

I know this might seem quite ridiculous, but is there any way to change the speed of a marquee in HTML with the hover function? If not, is there any way to change the speed at all? I found a javascript code that somehow works in the code, but I am unsure of how to get it to work. At first I tried it with a header as the text inside the marquee, but that didn't work either.

This is the code for regular scrolling that I have:

<marquee truespeed = "true" scrolldelay = "30">Such Doge, Much Wow</marquee>

And I was hoping something like this would make it slow down on hover:

marquee:hover {
            <marquee truespeed = "true" scrolldelay = "40">Such Doge, Much Wow</marquee>
        }

Then for some reason, when I hover over an image that I have, it slows down the marquee, but not when I hover over the marquee itself. Please help!

Solution

  • Not quite sure why you are using HTML inside a CSS-field, but personally, I would use JavaScript-tags to set the attributes:

    <marquee onmouseover="this.setAttribute('scrolldelay', 40)" onmouseout="this.setAttribute('scrolldelay', 30)" truespeed = "true" scrolldelay = "30">Such Doge, Much Wow</marquee>

    Edit Some things you say seem quite incorrect (frankly, I don't see how any of that is JavaScript code), just so you are aware of that. So far, you seem to have attempted to mix HTML with CSS, which doesn't really make any sense.