3

:nth-child(...)CSS セレクターとボックス シャドウ効果の組み合わせに問題があります。望ましい効果は次のとおりです。

  • コンテナー内の偶数番号の div 要素には、交互の背景色が与えられます。
  • ユーザーが div 要素の 1 つにカーソルを合わせると、ボックス シャドウが適用され、次の div の上に「ホバーした」div のように見えます。

しかし、問題が発生しています。ボックス シャドウは "hovered" 要素に適用されますが、奇数の div 要素とは対照的に、偶数の div 要素では効果が異なります。基本的に、各偶数 div の影は次の奇数 div に重なりますが、各奇数 div の影は次の偶数 div の後ろにレンダリングされます。

このペンは問題をよりよく示しています: http://codepen.io/jtlovetteiii/pen/cEaLK

HTML スニペットは次のとおりです。

<div class="rows">
  <div class="row"></div>
  <div class="row"></div>
  ...
</div>

CSSは次のとおりです。

.rows
{
  background-color: #AAAAAA;
}

.rows .row:nth-child(even)
{
    background-color: #E2E2E2;
}

.row
{
  height: 20px;
  cursor: pointer;
}

.row:hover
{
  box-shadow: 0px 10px 10px #888888;
}

私は何が欠けていますか？

4

3 に答える 3

3

これが起こっている理由は、あなたnth-child(even) divの だけが背景色を持っているからです。ホバー シャドウが他の に重なっているように見えますが、div実際にはそうではありません。親の背景色に重なっています。

position: relativeとの組み合わせで問題を解決できますz-index。

.rows {
  position: relative;
}

.row
{
  position: relative;
  height: 20px;
  cursor: pointer;
  background-color: #CCCCCC;
}

.row:nth-child(even)
{
  background-color: #E2E2E2;
}

.row:hover
{
  box-shadow: 0px 10px 10px #888888;
  z-index: 100;
}

CodePen デモ

于 2013-08-13T20:13:53.233 に答える
1

JSFiddle

.row
{
  height: 20px;
  cursor: pointer;
  position:relative;
  z-index:1;    
}

.row:hover
{
  box-shadow: 0px 10px 10px #888888;
  z-index:2;
}
于 2013-08-13T20:13:57.730 に答える