“悬停”不能正常工作

我在我的项目中有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); 
}

来源

2016-01-21 Moran

给一些gode。你如何实现它？ – pbaris

我现在添加我使用的类。你可以在Chrome控制台看到。 – Moran

问题是您的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作品奇观

来源

2016-01-21 09:13:32

谢谢！有一种方法可以在css3中使用，而不是javascript来解决这个问题？ – Moran

现在我想到了，确实有一个css3解决方案。看我的编辑 –

酷！非常感谢！！！ :)） – Moran

“悬停”不能正常工作

回答

相关问题