私は openfin と反応を使用してアプリに取り組んでいます。複数の要素が一列に並んだツールバーです。ユーザーがポインターをその上に置いたときに背景色を変更する必要があるエッジの近くにあります。問題は、左または上/下 (およびウィンドウの外) への素早い動きによって、要素がホバー状態のままになることです。
JavaScriptを使ってみましたonmouseout
が、同じ問題があります。奇妙なのは、この問題がない同じツールバーに画像を含む要素がいくつかあることです。
何か案は?
編集: HTML/JSX:
<div>
<Component1 /> // 80x80-ish
<MyComponent /> // 20x80-ish wxh
<OtherComponents />
</div>
MyComponent は、動作しているものです。css は、コンポーネントの最も外側の div で単に変更background-color
されています。:hover
すみません、あまり具体的に言えません。
現在、コンポーネントはウィンドウの端と同じ高さになっています (境界線などはありません)。そこにいくつかのピクセルを追加する必要があるかもしれないと考えています。
Edit2 : Component1がwebkit-app-region: drag
. 通常の要素からその要素に移動するときにMouseOutが常にトリガーされるとは限らないため、これが問題の原因となります。
コンポーネントを縮小して、MouseOutにトリガーするスペースを確保することで問題を修正しました(私の場合は 5px で十分でした)。