当悬停在图像之后时，我试图实现一些不错的过渡效果。（悬停 div 从与鼠标相同的方向出现）。
一切正常，除了“悬停”过渡不是直线，而是更像对角线和填充方式。（在下面的示例中，过渡是从左：-378px；到左：0px / 顶部是 0 ）。
正常状态：
<div class="hover_effect initial_hover slideFromLeft" style="display: block;">link aici</div>
悬停状态（通过 jQuery 删除和添加类）：
<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>
我希望运动像悬停过渡一样在一条直线上，效果很好。你能指出我的错误吗？
这是html和css代码：
<div class="portfolio-sample regular-portfolio coding-2 isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate(0px, 0px);">
<img width="455" height="295" src="http://localhost/wp-content/uploads/2013/01/env0251-455x295.jpg" class="attachment-portfolio-two wp-post-image" alt="env025">
<div class="slideFromLeft hover_effect initial_hover slideLeft" style="display: block;">link aici</div>
<div class="custom_slider_shadow"></div>
</div>
谢谢！
.hover_effect{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.initial_hover{
position: absolute;
background: rgba(75,75,75,0.7);
width: 378px;
height: 245px;
top: 260px;
}
.slideFromLeft {
top: 0px;
left: -378px;
}
.slideLeft {
left: 0px;
}
回答： 好的，我想通了 - 这是因为在 slideFromLeft 悬停后添加了 initial_hover 类。一旦我扭转这些，它就会按我的预期工作