「懸停」不能正常工作

Question

我在我的項目中有div「transition」\「hover」有問題： Comverese。

在「成功故事」部分。當你將鼠標懸停在div上時，它就會上去，但當你在該div中移動鼠標時不會保持不動。

什麼問題？

.story1{ 
    position: absolute; 
    width: 22rem; 
    height: 12rem; 
    z-index: 9; 
    background: white; 
    padding: 1rem; 
    -webkit-transition:transform .6s ease-out; 
    -moz-transition:transform .6s ease-out; 
    -ms-transition:transform .6s ease-out; 
    -o-transition:transform .6s ease-out; 
    transition:transform .6s ease-out; 
} 

.story1:hover{ 
    -webkit-transform:translate(0px,-200px); 
    -moz-transform:translate(0px,-200px); 
    -ms-transform:translate(0px,-200px); 
    -o-transform:translate(0px,-200px); 
    transform:translate(0px,-200px); 
} 

Answer 1

問題是您的div在翻譯後不再被徘徊。 div上移了，你現在徘徊在div下面（即.quote div） - >故事div回落。

解決此問題的一種方法是使用一點JavaScript而不是單純依靠CSS。在mouseenter上添加一個特定的類，並在離開下面的div時將其刪除。

類似於以下內容（請注意，JavaScript有點簡單，應該改進以適合每個故事）。

CSS：

.story1.translated { 
    -webkit-transform:translate(0px,-200px); 
    -moz-transform:translate(0px,-200px); 
    -ms-transform:translate(0px,-200px); 
    -o-transform:translate(0px,-200px); 
    transform:translate(0px,-200px); 
} 

JS：

var story1 = document.getElementsByClassName("story1")[0];  
var blockquote = document.getElementsByClassName("quote")[0];  
story1.addEventListener("mouseenter", function() { 
    story1.className += " translated"; 
} 
blockquote.addEventListener("mouseleave", function() { 
    story1.className = story1.className.replace(" translated", ""); 
} 

編輯

一個純CSS的解決辦法是在:hover部分移動到.story和風格.story1因此，當它發生。如下：

.story:hover .story1{ 
    -webkit-transform:translate(0px,-200px); 
    -moz-transform:translate(0px,-200px); 
    -ms-transform:translate(0px,-200px); 
    -o-transform:translate(0px,-200px); 
    transform:translate(0px,-200px); 
} 

這似乎工作得很好，當我在本地更改它嘗試它在您的網站上。 同樣的變化也可以應用於.float-icon:hover。更改爲.story-icon:hover .float-icon作品奇觀