2

重複する要素 (正確には画像) があり、それらが上になくても、ホバーするとそれぞれのホバー効果をアクティブにする必要があります。これはかなり簡単なはずだと思います。何か不足していますか？

ここにjsFiddleがあります。そのスペースが緑と青で覆われていても、触れた場合に発火するには、赤のホバー効果が必要です。

#div1, #div2, #div3 {
  position: absolute;
  width: 100px;
  height: 100px;
}
#div1 {
  background-color: red;
}
#div2 {
  background-color: green;
  left: 25px;
  top: 25px;
}
#div3 {
  background-color:blue;
  left: 50px;
  top: 50px;
}
<div id="div1" onmouseover="alert('Red Div moused over');"></div>
<div id="div2"></div>
<div id="div3"></div>

4

2 に答える 2

3

Mysteryos が述べたように、一番上の要素だけが hover イベントを受け取ります。これは、このフィドルで見ることができます - http://jsfiddle.net/Frfbf/

赤いボックスと同じサイズのオーバーレイ div を追加できますが、他のボックスよりも上にあります。次に、赤いボックス自体ではなく、ホバー機能をそれに適用します。ここで見られるhttp://jsfiddle.net/yFD2E/1/

#container {
    position:absolute;
    width:100px;
    height:100px;
    border:2px solid #0f0;
    overflow:hidden;
    z-index:2;
}
#container:hover{border-color:#f00;}
#container div{z-index:1;}

更新: jquery ソリューション/出発点 - http://jsfiddle.net/yFD2E/6/

于 2013-05-02T06:43:34.733 に答える
3

あなたの指示とあなたの例は少し矛盾しています:

重複する要素があります...ホバーした場合にそれぞれのホバー効果をアクティブにするために、それらすべてが必要です...

と

そのスペースが緑と青で覆われていても、触れた場合に発火する赤のホバー効果が必要です。

ホバーしたときに各要素のホバー効果をアクティブにする必要がありますか?それとも、他の要素が上にある場合でも、下の要素のホバー効果をアクティブにする必要がありますか?

前者の場合、3 つすべてに共通する広い領域にカーソルを合わせたときに、赤、緑、青の効果がアクティブになりますか? それはもう少しトリッキーです。

後者の場合は、pointer-events: none上にある重なり合う要素で使用して、それらのホバー イベントを無視できます。優れたブラウザー サポートがないことに注意してください: http://caniuse.com/pointer-events

例としてあなたの JSFiddle を更新しました: http://jsfiddle.net/yFD2E/2/

それはあなたの問題を解決しますか？

于 2013-05-02T06:54:14.820 に答える