«hover» не работает должным образом

Question

У меня проблема с div «переход» \ «hover» в моем проекте: Comverese.

В разделе «ИСТОРИИ УСПЕХА». когда вы наводите div, он поднимается вверх по этому o.k, но не ложится спать, когда вы перемещаете мышь в этом 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. Добавление определенного класса в центр мыши и удаление его, когда вы покидаете 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 творит чудеса