CODEWITHSUNDEEP
css
Ziggy
Ziggy

Reputation: 35

CSS hover stops animation

I've got a <span> with some text in it and when you hover over it an image comes sliding down the page. So far so good. However, when your mouse accidentally hovers over the image, the animation will be stopped. I do not want that. 

.coffee {
    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    -ms-transition: color 0.2s linear;
    transition: color 0.2s linear;
    z-index: 10;
}
.coffee:hover {
    color: #B88A00;
}
.coffee img {
    position: absolute;
    display: block;
    height: 100px;
    width: 100px;
    z-index: 1;
    left: 280px;
    top: 50px;
    opacity: 0;
    -webkit-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -moz-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -o-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -ms-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
    transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.coffee:hover img {
    top: 150px;
    opacity: 1;
}

Any help would be much appreciated.

Upvotes: 3

Views: 910

Answers (2)

flavaflo
flavaflo

Reputation: 918

You can use the pointer-events attribute. If you set it to none, mouse events are omitted on elements with that css-rule applied.

.coffee img {
  pointer-events: none;
}

Here's the modified example: http://jsfiddle.net/kFd9g/

Upvotes: 0

sandeep
sandeep

Reputation: 92853

As per i understand may be that's you want. Write like this:

HTML

<span class="coffee"><u>coffee</u></span>!
<img src="image.jpg" alt="Coffee!"/>

CSS

.coffee:hover + img{
    top: 150px;
    opacity: 1;
}

Check this http://jsfiddle.net/quLKb/2/

Upvotes: 1

Related Questions