CSS：div要素overlaping、Zインデックスが

Question

が解決しないこれは私のhtmlです：

<div id="body"> 
    <div id="body-inner"> 
    <div class="game" id="csgo" onclick="window.location='https://csgo.fraid.gg/'"><div class="game-handle"></div></div> 
    <div class="game" id="minecraft" onclick="window.location='https://mc.fraid.gg/'"><div class="game-handle"></div></div> 
    <div class="game" id="lineage" onclick="window.location='https://l2.fraid.gg/'"><div class="game-handle"></div></div> 
    </div> 
</div> 

は、これは私のCSSです：.hoverクラスを切り替える

.game { 
    width: 807px; 
    height: 607px; 
    filter: drop-shadow(10px 10px 32px black) opacity(50%) grayscale(80%); 
    margin: auto; 
    margin-left: -220px; 
    margin-right: -220px; 
    transform: scale(0.7,0.7); 
    transition: 150ms ease-in-out; 
    position: relative; 
    z-index: 99; 
} 
.game#csgo { 
    background: url('game-csgo.png') no-repeat rgba(0,255,0,0.5); 
    background-size: 100%; 
} 
.game#minecraft { 
    background: url('game-minecraft.png') no-repeat rgba(0,255,0,0.5); 
    background-size: 100%; 
} 
.game#lineage { 
    background: url('game-l2.png') no-repeat rgba(0,255,0,0.5); 
    background-size: 100%; 
} 
.game.hover { 
    filter: drop-shadow(20px 20px 64px black) opacity(100%) grayscale(0%); 
    transform: scale(1,1); 
    transition: 150ms ease-in-out; 
} 
.game-handle { 
    width: 411px; 
    height: 525px; 
    cursor: pointer; 
    position: fixed; 
    bottom: 0; 
    left: 198px; 
    z-index: 99999; 
    background: rgba(255,0,0,1); 
} 

jQueryのスクリプト：

jQuery(function() { 
    jQuery('.game-handle').mouseenter(function() { 
    jQuery(this).parent('.game').addClass('hover',0); 
    }).mouseleave(function() { 
    jQuery(this).parent('.game').removeClass('hover',0); 
    }); 
}); 

そして、赤い部分はマウスオーバーイベントを登録したいものです。しかし、左から右に向かって、前のものの隣のdivは、赤の領域も重複しています！ :(緑の部分は、背景自体を保持するdivです。）すべての赤のdivを絶対的な前面に持っていく方法は？

"、剣のようにそれらからぶら下がって銃をものを持って腕とか、その後、メインのdivの幅が大きくなる必要があり、両側から負のマージンを持っている）

画面：

例：https://jsfiddle.net/9yy2csvd/

問題：

カーソルが赤色部分にあるが、右側のDIVから緑（無MouseEnterイベントがトリガされていない）、それに重なります。だから、カーソルを左に移動するだけで、赤い部分に触れて（イベントをトリガーする）しかし、私はこのようになり.game、赤い部分は、すべての緑の上にあることを

クラスを持つdiv要素のそれぞれの背景を、それを必要とする：

私は必要とする私は、マウスを動かしたときにのみその周囲の透明な背景（「カード」からはみ出している部分を含む）ではなく、「カード」自体にカーソルを合わせると、イベントがトリガーされます。

Answer 1

これは複雑です。

z-indexは通常動作しますか？

z-indexは、親のスコープ内でz-indexとなります。言い換えれば、この子の親がz-indexに設定されている場合、あなたは子供を他の親よりも高くすることはできません。

私はあなたが実際にが限り、あなたは次のいずれか使用しないように、所望の効果を達成できると結論付けた私の個人的なテストからの追撃

：どれz-index親のための

1. に
2. いずれも
3. 任意filter親の場合

上記のリストからすべてのプロパティが表示されますが結果としてになります。

例

z-index作品や、あなたが期待するように動作しないために多くの変数があります。試してみるためのテスト環境を用意しました。それが壊れたとき、そしてあなたがそれを修正するために適用できるプロパティについて注意してください。

$(function() { 
 
    $('body').addClass('child-relative'); // Simplest combination when it works 
 
    
 
    $('label input').click(function() { 
 
    var className = $(this).data('class'); 
 
    $('body').toggleClass(className); 
 
    }).each(function() { 
 
    var className = $(this).data('class'); 
 
    $(this).attr({ 
 
     checked: $('body').hasClass(className) 
 
    }); 
 
    }); 
 
});

/*/ "Works" = .child is above all .parent-s /*/ 
 

 
/*/ Basic styles /*/ 
 
.parent { 
 
    outline: 2px dotted blue; 
 
    background: rgba(0, 0, 255, .2); 
 
    width: 200px; 
 
    height: 200px; 
 
    float: left; 
 
    
 
    margin-right: -50px; 
 
} 
 

 
.child { 
 
    background: yellow; 
 
    outline: 2px dashed red; 
 
    width: 150px; 
 
    height: 150px; 
 
    margin: 25px; 
 
} 
 

 
/*/ Variables /*/ 
 
.parent-relative .parent { 
 
    /* Works when .child has position: relative/absolute; AND z-index > 0 */ 
 
    position: relative; 
 
} 
 

 
.parent-z-index .parent { 
 
    /* Never works */ 
 
    z-index: 0; 
 
} 
 

 
.parent-transform .parent { 
 
    /* Never works */ 
 
    transform: scale(1); 
 
} 
 

 
.parent-transform-rotate .parent { 
 
    /* Never works */ 
 
    transform: rotate(360deg); 
 
} 
 

 
.parent-filter .parent { 
 
    /* Never works */ 
 
    filter: opacity(100%); 
 
} 
 

 
.child-relative .child { 
 
    /* Works when .parent has only position: static; OR when .child has z-index as well */ 
 
    position: relative; 
 
} 
 

 
.child-z-index .child { 
 
    /* Works when .parent has position: static; OR position: relative; WITHOUT z-index */ 
 
    z-index: 1; 
 
} 
 

 
.child-transform .child { 
 
    /* Doesn't matter */ 
 
    transform: scale(1); 
 
} 
 

 
.child-transform-rotate .child { 
 
    /* Doesn't matter */ 
 
    transform: rotate(360deg); 
 
} 
 

 
.child-filter .child { 
 
    /* Doesn't matter */ 
 
    filter: opacity(100%); 
 
} 
 

 
/*/ Ignore following code /*/ 
 
h2 { 
 
    margin-bottom: 0; 
 
} 
 
.parent { 
 
    margin-top: 20px; 
 
} 
 
.controls .bad { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<h2><code>.parent { }</code></h2> 
 
<div class="controls"> 
 
    <label> 
 
    <input type="checkbox" data-class="parent-relative"> 
 
    <code>position: relative;</code> 
 
    </label> 
 
    <label class="bad"> 
 
    <input type="checkbox" data-class="parent-z-index"> 
 
    <code>z-index: 0;</code> 
 
    </label> 
 
</div> 
 
<div class="controls"> 
 
    <label class="bad"> 
 
    <input type="checkbox" data-class="parent-transform"> 
 
    <code>transform: scale(1);</code> 
 
    </label> 
 
    <label class="bad"> 
 
    <input type="checkbox" data-class="parent-transform-rotate"> 
 
    <code>rotate: scale(360deg);</code> 
 
    </label> 
 
    <label class="bad"> 
 
    <input type="checkbox" data-class="parent-filter"> 
 
    <code>filter: opacity(100%);</code> 
 
    </label> 
 
</div> 
 
<h2><code>.child { }</code></h2> 
 
<div class="controls"> 
 
    <label> 
 
    <input type="checkbox" data-class="child-relative"> 
 
    <code>position: relative;</code> 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" data-class="child-z-index"> 
 
    <code>z-index: 1;</code> 
 
    </label> 
 
</div> 
 
<div class="controls"> 
 
    <label> 
 
    <input type="checkbox" data-class="child-transform"> 
 
    <code>transform: scale(1);</code> 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" data-class="child-transform-rotate"> 
 
    <code>rotate: scale(360deg);</code> 
 
    </label> 
 
    <label> 
 
    <input type="checkbox" data-class="child-filter"> 
 
    <code>filter: opacity(100%);</code> 
 
    </label> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="child"> 
 
    Child 1 
 
    </div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="child"> 
 
    Child 2 
 
    </div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="child"> 
 
    Child 3 
 
    </div> 
 
</div>

私はWindows上でのみChromeでこれをテストしていることに注意してください。おそらく他の環境では.badとマークされたプロパティは問題なく動作します。私はあなたが実行するための詳細なテストを残します！ ;-)

素敵な一日を！
〜ウィクスター