2

在下面的代码中，我想保持.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/

4

1 回答 1

3

你有很多糟糕的选择器在进行。

我将.image:hover选择器更改.hover:hover为<a>元素是.hoverdiv 的子元素。

我还更改了.image具有动画规则的选择器，.hover a以将动画应用于其中的锚点。

我认为您误解了某些 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/

于 2013-01-08T10:23:01.783 回答