0

カーソルが div の背景画像の不透明な部分の上にある場合にのみ、div のマウスオーバーをトリガーすることは可能ですか? おそらくJavascriptを介して？

Google で見つけられるのは、古い IE PNG の修正だけです。

4

3 に答える 3

0

これは、次の質問と同様の質問のように見えます:非透明ピクセルでのヒット検出

これは、jQuery で属性を取得することにより、背景画像に対しても実行できると思います。

$('#myDiv').css('background-image');

私は個人的にこれを行っていませんが、実行可能な解決策のようです。これは最新のブラウザーでのみ機能しますが、 excanvasとの互換性を保つことができるはずです。

于 2012-09-07T14:17:11.017 に答える
0

ちょっとした調整ですが、不透明な div にクラスを追加して、JavaScript を使用してチェックしてみませんか?

jQuery の場合:

$('div').mouseover(function(){
    if ($(this).is('.opaque')) {
        //Some actions
    }
 });
于 2012-09-07T14:17:43.590 に答える
0

それは可能ですが、それほど簡単ではありません。多くの Javascript を使用する必要があります。

<div>カーソルの X、Y 座標を返す onmousemove イベントにアタッチする必要があります。イベント ハンドラー関数は、代わりの onmouseover イベントをトリガーするために、カーソルが正しい場所にあるかどうかをテストします。

「カーソルが不透明なピクセルの上にあるかどうか」を実装する テストは 2 つの方法で実行できます。1 つ目は、単純な数式を作成することです (たとえば、画像の不透明な部分が適切な長方形、円、または多角形を作成するかどうかなど)。より難しい (そしてブラウザのサポートが少ない) 方法は、背景画像を Canvas オブジェクトにロードし、現在のピクセル値の不透明度を取得してそこから取得する方法です。次のようにします。

var pixel = canvas.getImageData(x, y, 1, 1).data;
var alpha = pixel[3]; // assuming RGBA
if( alpha > threshold ) onMouseOver(); // raise the event

もう 1 つの方法は、完全に透明な div (またはその他の要素) を作成し、下の div の不透明な部分のみを覆うように配置およびサイズ設定してから、mouseoverその要素のボックスの をテストすることです。

于 2012-09-07T14:17:53.017 に答える