Question

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

我正在尝试关注代码，但它不起作用：

HTML：

link2

CSS：

<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>

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

Answer 1

你有很多糟糕的选择器在继续。

我将.image:hover选择器更改为.hover:hover，因为<a>元素是.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/

在悬停时用css改变div位置

1 个答案: