"hover" 无法正常工作

Question

我的项目 div "transition"\"hover" 有问题： Comverese.

在 "SUCCESS STORIES" 部分。当你悬停 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。在 mouseenter 上添加特定的 class 并在您离开下面的 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 会产生奇迹

"hover" 无法正常工作

The "hover" not work properly

html

css

web

frontend

web-frontend