css - CSS悬停停止动画

Question

我有一个<span>包含一些文字的内容，当你将鼠标悬停在它上面时，一个图像会从页面上滑下来。到目前为止，一切都很好。但是，当您的鼠标意外悬停在图像上时，动画将停止。我不要那个。

.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;
}

任何帮助将非常感激。

Answer 1

据我了解，这可能是你想要的。像这样写：

HTML

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

CSS

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

检查这个http://jsfiddle.net/quLKb/2/

Answer 2

您可以使用指针事件属性。如果将其设置为 none，则在应用了该 css 规则的元素上将省略鼠标事件。

.coffee img {
  pointer-events: none;
}

这是修改后的示例：http: //jsfiddle.net/kFd9g/