1

クリック可能な一連の div の上に絶対位置の透明な div を重ねることは可能ですか? 応答を得るために、下の赤い div にカーソルを合わせたいと考えています。

<style type="text/css">

#holder{
    width:200px;
    height:200px;
}
.clickMe {
    width:100px;
    height:100px;
    cursor:pointer;
    background-color:red;
    border:1px solid black;
    float:left;
    margin:-1px;
    padding:0;
}
.hidey {
    position:absolute;
    top:0;
    left:0;
    z-index:50;
    height:50%;
    width:50%;
    opacity:.25;
    background-color:black;
}
</style>
<div class="hidey"></div>
<div id="holder">
    <div class="clickMe"></div>
    <div class="clickMe"></div>
    <div class="clickMe"></div>
    <div class="clickMe"></div>
</div>
4

3 に答える 3

5

ポインタイベントはあなたの問題を解決できます。ポインター イベントは、これまでのところ Firefox 3.6 以降、Safari 4、および Google Chrome でサポートされています (互換性テーブルを参照してください)。

于 2012-05-19T08:22:49.100 に答える
1

一番上の div はマウス アクションを消費するため、(私が認識している) やりたいことを行う唯一の方法は、一番上の div に onClick アクションを実行させ、そのクリックをその下の div に渡す JavaScript 関数を作成することです。

詳細については、この回答を参照してください。

テキスト ボックスの Enter キーで JavaScript を使用してボタン クリックをトリガーする

マウスの位置も取得し、それを使用してクリックするボックスを決定する必要があるため、関数はもう少し複雑になります。

その方法については、こちらの2番目の回答を参照してください。

body の onClick イベントからマウス クリックの絶対位置を取得するにはどうすればよいですか?

編集：申し訳ありませんが、クリックではなくホバーと言っていました。その onHover アクションを作成し、クリックの代わりにホバー アクションを渡します。一般的な考え方は同じですが。

于 2012-05-19T07:39:46.890 に答える
0

これを機能させるために長々とするのではなく、単純な昔ながらの方法を提案させてください。

内部要素を単一のラッパーで囲むという現在の構造ではなく、個々の要素にラッパーを与え、それらのラッパーにイベントを配置して子要素を見つけます。

これではなくIE：

<div class="wrapper">
    <div class="clickMe">
        ...
    </div>
    <div class="clickMe">
        ...
    </div>
</div>

これを使って：

<div class="wrapper">
    <div class="clickMe">
        ...
    </div>
</div>
<div class="wrapper">
    <div class="clickMe">
        ...
    </div>
</div>

HTML には追加のマークアップが含まれますが、私の意見では、現在のマークアップを機能させるために必要な長さよりも、これの方が望ましい可能性があります。新しいテクノロジーが存在するからといって、それが仕事に最適なツールであるとは限りません。

于 2012-05-19T07:42:13.237 に答える