你有很多糟糕的选择器在继续。
我将.image:hover选择器更改为.hover:hover,因为元素是.hover div的子元素。
我还将具有动画规则的.image选择器更改为.hover a,以将动画应用于其中的锚点。
我认为你误解了一些CSS规则是如何工作的。当您希望元素位于另一个元素中时,您必须告诉它使用宽度和高度填充其父元素的100%:100%。
你的方式,.hover div坐在图像div下面。现在一切都很好。
.wrap{
margin: 100px;
width: 500px;
overflow: hidden;
position: relative;
}
.hover a{
border: 1px solid red;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.hover{
position: absolute;
width:100%;
height: 100%;
top: 0;
}
a.link1{
width: 70px;
height: 30px;
background: yellow;
position: absolute;
left: -100%;
}
.hover:hover a.link1{
left: 40%;
}
a.link2{
width: 70px;
height: 30px;
background: yellow;
position: absolute;
right: -100%;
}
.hover:hover a.link2{
right: 40%;
}
:)
作为最后一点:当你设置一个元素的位置时,它会将display: block;分配给它,所以display: inline-block;几乎没用。 :)
http://jsfiddle.net/XjTyJ/1/