html - 悬停时使用CSS更改div位置

Question

在下面的代码中，我想隐藏 .link1 和 .link2，将鼠标悬停在 .image 上，我希望通过过渡效果使它们可见，以便 link1 从左侧移动，link2 从右侧移动，它们都到达 div 的中心。

我正在尝试以下代码，但它不起作用:

HTML:

<div class="wrap">
  <div class="image"><img src="http://farm9.staticflickr.com/8043/8357588952_94cee71fef.jpg" /></div>
  <div class="hover">
     <a class="link1">Link 1</a>
     <a class="link2">Link 2</a>
  </div>
</div>

CSS:

.wrap{
  margin: 100px;
  width: 500px;
  overflow: hidden;
  position: relative;
}

.image{
  border: 1px solid red;
  -webkit-transition: all 0.4s; 
    -moz-transition: all 0.4s; 
    transition: all 0.4s;
}

.hover{
  position: absolute;
  top: 40%;  
}

.link1{
    display: inline-block;
    width: 70px;
    height: 30px;
    background: yellow; 
     position: absolute;
     left: -100%;
}

.image:hover .link1{
   left: 40%;  
}

.link2{
    display: inline-block;
    width: 70px;
    height: 30px;
    background: yellow; 
     position: absolute;
     right: -100%;
}

.image:hover .link2{
   right: 40%;  
}

演示: http://jsfiddle.net/XjTyJ/

Answer 1

你有很多糟糕的选择器。

我更改了 .image:hover选择器到 .hover:hover作为<a>元素是 .hover 的子元素分区

我还更改了 .image动画规则为 .hover a 的选择器将动画应用于其中的 anchor 。

我认为您误解了某些 CSS 规则的工作原理。当你想让一个元素位于另一个元素中时，你必须使用 width 和 height : 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/