CSS悬停停止动画答案

【问题标题】：CSS hover stops animationCSS悬停停止动画
【发布时间】：2012-09-22 04:57:50
【问题描述】：

我有一个<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;
}

任何帮助将不胜感激。

【问题讨论】：

能否在jsfiddle.net 中创建一个示例以便更好地理解
我已经创建了我的第一个 jsfiddle 示例； jsfiddle.net/quLKb

标签： css

【解决方案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/

【讨论】：

对其工作原理的一些解释：以前，img 在.coffee 内，这意味着任何鼠标事件都会从img 冒泡到其父级。当您在悬停.coffee 后悬停img 时，.coffee:hover img 选择器会重新触发，这会导致img 再次跳下。通过将img 移到.coffee 之外，img 事件不再到达.coffee 并且:hover 选择器不会再次被触发。
根据 OP 问题，当他不小心将鼠标悬停在图像上时，他不希望图像停止。但是图像在 .coffee 范围内，当 OP 悬停在图像上时触发。因此，为此，我们最好将图像移到 .coffee 范围之外。然后，当您将鼠标悬停在图像上时，图像不会停止。

【解决方案2】：

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

.coffee img {
  pointer-events: none;
}

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

【讨论】：