2

本質的には複製したいli:hover+liのですが、それよりも少し複雑です。私はCSSトランジションをいじっていて、（使いやすさのために）閉じるのが遅いドロップダウンメニューを作ろうとしています。つまり、マウスをメニューの外に移動しても、すぐには消えません。

問題なく動作しましたが、トップ レベルのアイテムから次のアイテムに移動すると、前のメニューが 1 秒間開いたままになります。これはドロップダウンなしの単純化された例で、トップ レベルのアイテムを移行するだけです。関連する CSS:

.menu > li {
  background-color: #4F57AA;
  /* transition out */
  -webkit-transition: background-color .2s ease-in-out 1s;
}
.menu > li:hover {
  background-color: #8F002E;
  /* transition in */
  -webkit-transition: background-color .2s ease-in-out;
}
.menu > li:hover+li {
  -webkit-transition: background-color .2s ease-in-out;
}

そのため、メニューから完全に離れると、リスト項目は 1 秒待ってから青色にフェードバックします。ただし、「One」から「Two」に移動するとき、「One」のホバー状態も 1 秒待機します。

兄弟セレクターを使用して、右から左に移動するときに瞬時に遷移することができました。もちろん、「前の兄弟」セレクターはまだないため、その逆は機能しません。これらのトランジションをトリガーするために jQuery を少し使用したいのですが、ここで行き詰まりました。私はこれを試しました：

$('.menu > li').hover(
  function() {
    // instant transition for siblings?
    $(this).siblings().css('-webkit-transition', 'background-color .2s ease-in-out');
  },
  function() {
    // revert to regular transition?
    $(this).siblings().css('-webkit-transition', 'background-color .2s ease-in-out 1s');
  }
);

しかし、うまくいきません。何か案は？

4

1 に答える 1

1

純粋なCSSで欲しいものを手に入れることができると思います。私はあなたの最後のセレクターを（兄弟を使用して）削除し、それを＃2カスケード位置に押し上げ、.menu:hover最初のものを探すようにセレクターを変更しました：

.menu > li {
  background-color: #4F57AA;
  /* transition out */
  -webkit-transition: background-color .2s ease-in-out 1s;
}

.menu:hover > li {
  -webkit-transition: background-color .2s ease-in-out .2s;
}

.menu > li:hover {
  background-color: #8F002E;
  /* transition in */
  -webkit-transition: background-color .2s ease-in-out;
}
于 2012-11-19T21:00:32.227 に答える