1

これが私のHTMLです：

<div id="one"><div id="element1"></div></div>
<div id="two">some stuff</div>

divoneとtwoは同じ幅と高さの長方形です

これはCSSです：

#one { position: relative; width: 390px; height: 482px; }
#two { position: relative; z-index: 100; top: -482px; width: 390px; height: 482px; }

ご覧のとおり、divはマスクとして使用されるtwodivのすぐ上に配置されていますone

私はそのようなことをする必要があります：

$('#element1').mouseover(function(e){ alert('Hello') });

mousemoveon divを使用してtwo、マウスの位置が（親divに対して）xとx + widthの間であるかどうかを確認し、。についても同じことを行いました。element1oney

その解決策は機能しますが、私が適用すると問題があり-webkit-transform:rotate(45deg);ますelement1

私は初めてで画像を投稿できませんが、mousemoveon divで処理される領域が、回転したときにdivtwoと一致しないことは簡単に理解できます。element1

マウスが上に移動したことをどのように知ることができelement1ますか？

4

1 に答える 1

1

基本的にあなたの問題は、divtwoが他の要素をカバーし、カバーされた要素にイベントを登録できないことです。

これを修正するには、CSSpointer-events:none;をdivtwoに適用して、イベントをdivの下に登録できるようにします。

デモ-divpointer-events:none;での使用two

DEMOは、視覚的表現と回転のために次の追加を加えて投稿された正確なコードを使用します。

#one{
    border: 1px solid red;
}

#element1{
    background-color: blue;
    border: 1px solid blue;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    height: 5px;
}

そしてCSSは次のように変更され#twoます：

#two { 
    position: relative; 
    pointer-events:none; 
    z-index: 100; 
    top: -482px; 
    width: 390px; 
    height: 482px; 
}
于 2013-01-26T17:29:35.927 に答える