在 div 悬停时，从左到右为悬停的 div 设置动画，并从左到右为隐藏在屏幕外的新 div 设置动画答案

【问题标题】：On div hover animate the hovered div from left to right off screen and animate new divs from left to right that were hidden off screen在 div 悬停时，从左到右为悬停的 div 设置动画，并从左到右为隐藏在屏幕外的新 div 设置动画
【发布时间】：2013-01-13 15:15:15
【问题描述】：

如何使用 Jquery 或 CSS3 将悬停的 div（鼠标悬停）动画到屏幕左侧，并在另一个下显示新的 div，这是问题的图片链接： http://i48.tinypic.com/f12z6.jpg

【问题讨论】：

学习 jquery、javascript、css 和 html。

标签： jquery css html css-transitions

【解决方案1】：

使用 CSS 3 transitions:

/* out of view on hover */
.container:hover .hoverMe{
  margin-left: -200px;           
}

/* bring other DIVS inside view when mouse is over container */
.container:hover ~ .slidingOne{
  margin-left: 0;                
}

.hoverMe, .slidingOne{  
  transition: margin 1s;       
}

.slidingOne{
  margin-left: -200px;        
}

假设标记如下所示：

<div class="container">
  <div class="hoverMe"> 
    ...
  </div>
</div>    

<div class="slidingOne">
  ...
</div>

<div class="slidingOne">
  ...
</div>

DEMO

【讨论】：

感谢您的回复，这很好用，只是我忘了说我需要使“slidingOne”div 可链接，这样当我尝试将它们悬停时它们不会消失，但当我离开他们回到起始位置并再次显示 hoverMe 的区域，有没有办法做到这一点？
我认为您需要为此使用 javascript。我做了一个简单的例子here。

【解决方案2】：

您可以使用 CSS3 的 Transform 属性来做到这一点：

http://www.w3schools.com/cssref/css3_pr_transform.asp

您要做的是“翻译”这些 div。我可能会使用 jQuery 来添加转换类。

【讨论】：