1

Fiddleに次のコードがあります。

右上隅の div で 2 つのテキストを交互に表示しようとしています。div にカーソルを合わせて上下に移動すると、テキストが期待どおりに交互に表示されます。ホバーすると、現在のテキストが非表示になり、非表示のテキストが表示されます。ホバーアウトすると、同じことが起こります。

しかし、カーソルを合わせて左に移動すると、現在のテキストは消えず、非表示のテキストは表示されません (これは予想される動作でした)。

私が見つけたのは、テキストの幅が等しくないという問題です。幅を 100px に設定すると、機能します。

そのdivのテキストは可変長になるため、幅を設定したくありません。

何が起こっているのですか?幅を固定数に設定せずに修正するにはどうすればよいですか?

HTML:

<div class="topBar">
    <div class="item2" id = "i1">
       0123456789
    </div>
    <a class="item2" id = "i2" href="#">
       9876
    </a>
</div>

CSS:

.topBar {
  position: fixed;
  width: 100%;
  height:50px;
  top: 0;
  min-width:480px;
  border:1px solid red;
  z-index:1000;
}


.item2 {
  position:absolute;
  right:0;
  border-left: 1px solid black;
  border-right: 1px solid black;
  height:50px;
}

#i2 {
    display:none;
}

JavaScript

$("#i1").hover(
    function() {
      $(this).hide();
      $("#i2").show()
    },
    function() {
    }
);

$("#i2").hover(
    function() {
    },
    function() {
      $(this).hide();
      $("#i1").show()
    }
);

編集：

私はそれをやってハッキングしましたが、うまくいきます 

$("#i2").width($(this).width());

しかし、私はまだ正しい答えを知りたいです。

4

1 に答える 1

1

これが何が起こっているかです

左に移動すると、$("#i2").hoverがトリガーされますが、 の方が広いため、#i1すぐにその上に「ホバリング」し、 を再トリガーします。$("#i1").hoverこれにより、表示が維持され#i2ます。もちろん、今は の上に#i2カーソルを置いていないので、再度入力してから上または下に移動して、関数を再トリガーせずに終了をトリガーする必要があり#i1ます。

幅を等しくすることよりも、状況を処理するエレガントな方法は考えられません (CSS または JavaScript によって設定されます)。

于 2013-07-15T01:03:24.633 に答える