CSS Hoverがマージントップのマイナス値で呼び出されていません

Question

私のカルーセルのページングをカルーセルとその下のdivに重ねたいとします。ただし、ページングのコンテナをmargin-top: -49px;に設定すると、ページャーの下半分にあるcssによってホバーが認識されません。その後、私のページング制御の下半分の上にマウス

.under-div:hover{ 
    background-color: blue; 
} 

は、私がここにデモの目的のために.slick-dots:hover{ background-color: red; }追加.under-div

で青の背景をトリガー：

は、より多くのデバッグの後、私は私が追加した場合に発見

ここ

コードです：

<div class="slick-list draggable"> 
    <-- here is the carousel --> 
</div> 

<div class="slick-controls"> 
    <ul class="slick-dots" style="display: table;bottom: -49px;"> 
     <li class="slick-active"> 
      <button type="button" data-role="none">1</button> 
     </li> 
     <li> 
      <button type="button" data-role="none">2</button> 
     </li> 
    </ul> 
</div> 

.slick-list { 
    position: relative; 
    overflow: hidden; 
    display: block; 
    margin: 0; 
    padding: 0; 
} 

.slick-controls .slick-dots { 
    display: table! important; 
    width: auto; 
    line-height: inherit; 
    position: relative; 
    bottom: -25px; 
    padding: 10px; 
    display: inline-block; 
    background-clip: padding-box; 
    margin: auto; 
    /* opacity: 0; */ 
    -webkit-transition: all 200ms ease-out; 
    -moz-transition: all 200ms ease-out; 
    -o-transition: all 200ms ease-out; 
    transition: all 200ms ease-out; 
    z-index: 5000; 
} 
.slick-controls { 
    margin-top: -49px; 
} 

Answer 1

おそらく何が起こっているが、あなたのホバーは、残りの上にレンダリングされているカルーセル、で撮影し、ノーがありますされていることです下にあるものはカルーセルの親ではないので、以下のものも同様にキャプチャする必要があります。

あなたはこのようになりますな構造を持っている場合：aはホバーを受け取ることになりますb、それらを1つだけ重なっ

<a></a> 
<b></b> 

。 bがrelativeであり、aがabsoluteである場合、aはホバーをキャプチャします。

これはあなたの構造は次のようになりますとき異なっている：

<a> 
<c></c> 
</a> 
<b></b> 

cがaと重複すると仮定すると、あなたがcに置くと、cとaの両方がイベントをキャプチャします。 bは、前の例と同じように動作します。

JSを関与させたい場合を除き、これを克服する良い方法はありません。その場合は、すべてのイベントをキャプチャして、送信する要素を計算してから、.hoverのようなクラスを追加しますしかし、これは非常にお勧めです。

あなたのカルーセルがあなたと対話できるはずのページの上部に表示される可能性があります。