1

それで、トランジション/ホバー効果をいじっていたので、それがコードです。

HTML

  <section>
    <a href="#" title="button">CLICK!</a>
    <a href="#" title="button">CLICK!</a>
    <a href="#" title="button">CLICK!</a>
    <a href="#" title="button">CLICK!</a>
  </section>

以下

section {
    width: 700px;
    height: 500px;
    margin: 250px auto;
    position:  relative;
    background: #08c;

    a {
      border-radius: 51px;
      background: #e60;
      line-height: 100px;
      text-align: center;
      color: #04e;
      font-size: 24px;
      font-weight: bold;
      font-family: tahoma;
      text-decoration: none;
      display: block;
      width: 100px;
      height: 100px;

      &:nth-child(1){
          position: absolute;
          top: -100px;
          left: -100px;
          -webkit-transition: left 2s ease;

          &:hover,
          &:focus{
            left: 800px;
          }
      }
      &:nth-child(2){
          position: absolute;
          top: -100px;
          right: -100px;
          -webkit-transition: top 2s ease;

          &:hover{
            top: 600px;
          }
      }
      &:nth-child(3){
          position: absolute;
          bottom: -100px;
          right: -100px;
          -webkit-transition: right 2s ease;

          &:hover{
            right: 600px;
          }
      }
      &:nth-child(4){
          position: absolute;
          bottom: -100px;
          left: -100px;
          -webkit-transition: bottom 2s ease;

          &:hover{
            bottom: 600px;
          }
      }
  }
}

例: http://jsbin.com/anitob/1

しかし、私は奇妙なことに出くわしました。リンクにカーソルを合わせると、ホバーによって適用された正しい位置に移動し始めますが、ある時点 (常に異なる) で効果が停止し、元の位置に戻ります!

誰かがこれを見て、何が問題なのか知っていますか?

4

2 に答える 2

4

@zeMinimalistは正しいです。

これを回避する方法 (ホバー効果を維持したい場合) は、要素ではなく画像を移動することです。

したがって、基本的に、画像はホバー効果のある要素の上に配置されたダミー要素になります。次に、「画像」にカーソルを合わせると、ホバートリガーを持つ要素が移動していないため、期待どおりに移動し、リセットされません。

このようなもの：

.moving_element{
    left: 0px;
    -webkit-transition: bottom 2s ease;
} 
.static_element:hover .moving_element{
   left: 800px; 
}

したがって、ユーザーは の上にカーソルを置きますが.static_element、.moving_element遷移するのは です。

于 2012-12-04T23:02:29.217 に答える
3

問題は、ホバー効果が動くオブジェクトにあることです。したがって、マウスを動かすと、ブラウザがマウスが要素上にないことを認識するため、マウスは自動的にリセットされます。おそらく、ブラウザがマウスを動かす必要がない場合があり、これがランダムに見える理由です。

于 2012-12-04T22:50:11.930 に答える