Question

我遇到了div＆＃34;过渡＆＃34; \＆＃34; hover＆＃34;在我的项目： Comverese

在＆＃34; SUCCESS STORIES＆＃34; 。当你将鼠标悬停在它上面时，它会向上移动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） - ＆gt;故事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可以创造奇迹

＆＃34;悬停＆＃34;不能正常工作

1 个答案: