メニューホバーのマウスの位置に応じて画像を回転させる - ワードプレス

Question

これはthis oneのようなパラレルな質問があるかもしれませんが、まだ私が目指しているものはまだありません。

編集：この質問は否定性を引きつけたので、私はそれがどのように行われたかについてのガイダンスを要求していることを指摘する必要があります。私は周りを探索し、同様のシナリオにjQueryソリューションを見つけました。私は愚かではない、私はちょうど真に技術的なコミュニティからの指導と助けを求めている。だから、言った...ここに状況があります：

私は、矢印のpng画像をワードプレスサイトのメニューのタブを指すように回転させたいので、メニューリンクの上にマウスを置くと、画像それを指すが、マウスを離すと、イメージは通常の向きに戻ります。

マウスがメニュー項目の上にあるときは、マウスを常に完全に追いかけたくありません。

これを行う最も簡単な方法について教えてもらえますか？

Answer 1

これは「応答性」のレイアウト、つまり異なる画面解像度/サイズで動作するレイアウトでも実行できると考えています。

画面上の要素の位置を決定することができ、ここで説明されている：我々は、メニュー項目の位置とサイズを決定することができるのでRetrieve the position (X,Y) of an HTML element

は、我々は三角形の2辺を決定することができます。矢印からメニュー項目に移動します。次に、ピタゴラス定理を使用して、催奇形性の長さを計算することができます。次に正弦、余弦、および/または正接のプロパティを使用して、三角形の角度を計算し、矢印を適切に回転させることができます。

これはコードの記述方法です。私は将来、ある時点でそれを書くかもしれません。