CSS hover stops animation

Question

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.

Answer 1

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/