CODEWITHSUNDEEP
htmlcsshovermarquee
saplingPro
saplingPro

Reputation: 21329

Why doesn't the marquee stop on hover?

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 ?

Upvotes: 0

Views: 1914

Answers (1)

Kevin Sandow
Kevin Sandow

Reputation: 4033

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.

Upvotes: 5

Related Questions