CSS懸停停止動畫

我有一個<span>，裏面有一些文字，當你將鼠標懸停在它上面時，圖像就會滑到頁面上。到現在爲止還挺好。但是，當鼠標意外懸停在圖像上時，動畫將停止。我不要那個。CSS懸停停止動畫

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

任何幫助將不勝感激。

來源

2012-09-20 Ziggy

你可以創建http://jsfiddle.net一個例子更好地理解 – sandeep

我已經創建了我的第一個例子的jsfiddle; http://jsfiddle.net/quLKb/ – Ziggy

據我瞭解可能是你想要的。像這樣寫：

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/

來源

2012-09-20 11:41:19 sandeep

關於這是如何工作的一些解釋：之前，'img'在'.coffee'裏面，這意味着任何鼠標事件從'img'到其父項（）。在懸停'.coffee'後懸停'img'時，'.coffee：hover img'選擇器被重新觸發，導致'img'再次跳下。通過將'img'移動到'.coffee'外部，'img'事件不再達到'.coffee'，'：hover'選擇器不會再被觸發。 –

根據OP問題，他不希望圖像在意外懸停在圖像上時停止。但圖像是在**。咖啡**範圍內，當OP懸停在圖像上時觸發。所以，如果我們將圖像移動到**，咖啡**範圍以外，這很好。然後當您將鼠標懸停在圖像上時，圖像不會停止。 – sandeep

您可以使用指針的事件屬性。如果將其設置爲none，則在應用了該css規則的元素上會省略鼠標事件。

.coffee img { 
    pointer-events: none; 
}

下面是修改後的例子：http://jsfiddle.net/kFd9g/

來源

2012-09-21 20:57:50 flavaflo

CSS懸停停止動畫

回答

相關問題