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

悪いセレクターがたくさん起こっています。

要素がdivの子であるため、.image:hoverセレクターをに変更しました。.hover:hover<a>.hover

.imageまた、アニメーションルールを持つセレクターを変更して、.hover aアニメーションを内部のアンカーに適用しました。

一部のCSSルールがどのように機能するかを誤解していると思います。要素を別の要素内に配置する場合は、幅と高さ：100％を使用して、親の100％を埋めるように要素に指示する必要があります。

あなたがそれを持っていたように、.hoverdivは画像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%;  
}

:)

最後の注意として：要素の位置を設定すると、それがeffectivleyによって割り当てdisplay: block;られるため、display: inline-block;ほとんど役に立たなくなりました。:) http://jsfiddle.net/XjTyJ/1/

于 2013-01-08T10:23:01.783 に答える