0

Raphaelのイベントにアンカーを追加しようとしているので、ホバーしたときにmouseoverトリガーされません。mouseout

ここに、私が何を意味するかをよりよく示すためのフィドルがあります

4

1 に答える 1

1

以下の最後の例を使用して、動作する jsfiddle を次に示します。

Raphael だけでこれを行うと、複雑になります。基本的な考え方は次のとおりです。

  • マウスアウト イベントで、Element.isPointInside()マウスアウトがリンクによってトリガーされたのか、ボックスを離れたときにトリガーされたのかを判断するために使用します。
  • event.target; を使用できます。イベントは mouseout コールバックに渡されます
  • リンクによってトリガーされた場合は、単にマウスアウトを無視します (実際のボックスを離れると、別のマウスアウトが表示されます)。
  • mousein イベントでは、ボックスの外から来た場合にのみトリガーするようにしてください (ユーザーがリンクから戻ってきたときに、別の mousein イベントが発生します)。

Raphael のもう 1 つの方法は、リンクと背景の両方に透明なボックスを描画し、それを使用してマウス イベント (クリックを含む) をトリガーすることです。これにより、複雑さが大幅に軽減されます。

少しごまかす必要があり、ここで車輪を再発明したくない場合は、既存のソリューションを使用して、それを Raphael のコードに統合することができます。たとえば、jQuery を使用して、次のようなイベントをトリガーできます。

jQuery('#button').on('mouseenter', function() { xxd.stop().animate(...) }
jQuery('#button').on('mouseleave', function() { xxd.stop().animate(...) }

さらに一歩進んで、Raphael でこれを管理する理由はまったくありません。Raphael を使用して背景画像を作成および管理するだけで、残りは jQuery またはお気に入りのライブラリに残します。

于 2013-04-09T13:48:11.200 に答える