“悬停”无法正常工作

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 会产生奇迹