2

クリックすると左に移動するボタンがあります。この部分はうまく機能しますが、マウスを動かすまでホバー状態がアクティブなままになる理由について混乱しています。問題のjsfiddleを作成しました。ボタンをクリックし、マウスを動かさないでください。アニメーションが完了した後でも、ホバー状態がトリガーされることに注意してください。

ここに私のコードHTMLがあります:

<a href="#">Click</a>

CSS:

a{
color: white;
background: blue;
padding: 10px;
position: absolute;
left: 0;

}
a:hover{
background: green;
}

JS:

$('a').click(function(){
  var aW = $(this).outerWidth();
  $(this).animate({
      'left': aW
  });
});
4

2 に答える 2

0

実際のテキスト「リンク」には、幅100％（画面幅）とデフォルトの高さのデフォルトのプロパティがあるためだと思います。したがって、クリックすると、実際にはテキストがホバリングされます。クリックしてマウスを遠くに移動すると、ホバー効果が消えます。

于 2013-09-17T03:23:47.343 に答える
0

提案: cloneNode() 関数を使用してください。ボタンをクリックしたら、そのクローンを作成します。クローン要素でアニメーションをトリガーします。

理由: ホバー時の要素はイベントを保持しますが、クローン要素は保持しません。

于 2014-10-15T14:10:56.090 に答える