Why doesn't the marquee stop on hover? - html

Question

To stop the marquee for mouse-hover I did this:
CSS:
<style type="text/css">
.wm {
border: solid 2px;
border-color:#0aa2e3;
border-radius: 10px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:13px;
}
marquee:hover {
animation-play-state:paused;
}
</style>
HTML :
<p class="wm"> <marquee> ... </marquee> </p>
But nothing happens as I point my mouse over the moving paragraph. Why is that ?

Answer 1

That's because marquee isn't a CSS3 animation and that's about all you can pause via animation-play-state:paused;
But more importantly: You should no longer be using marquee at all
If you need something similar, like a moving link list that can be clicked and stops on hovering, you should be looking for alternatives, I could bet there are some jQuery news ticker plug-ins out there.
Edit: Since you're looking for a pauseable CSS3 Animation according to your comments, you'll require the following markup:
<p class="marquee"> <!-- the wrapping container -->
<span> ... </span> <!-- the tray moving around -->
</p>
The content in your span will be the one moving around your wrapping container with the marquee class.
/* define the animation */
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
/* define your limiting container */
.marquee {
width: 450px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
/* this is the tray moving around your container */
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 15s linear infinite; /* here you select the animation */
}
/* pause the animation on mouse over */
.marquee span:hover {
animation-play-state: paused
}
Also as an jsfiddle: http://jsfiddle.net/MaY5A/209/
Additional note:
Since CSS3 animations are still experimental in some browsers, you might have to add vendor prefixes. Which can be weird especially for the animation definition itself:
#-webkit-keyframes marquee {
...
}
#-moz-keyframes marquee {
...
}
But transform, translate, animation and animation-play-state might require vendor prefixes, depending on how far back you want to support browsers.