2 
<div class="row">
   some content

   <div class="info-box">
      some other content
   </div>
</div>


.row {
    float: left;
    margin-bottom: 1.5%;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background-color: rgb(250, 250, 250);
    width: 685px;
    -webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}


.row:hover {
    background-color: rgb(240, 245, 245);
    -moz-box-shadow:    inset 0 0 5px #4d4d4d;
   -webkit-box-shadow: inset 0 0 5px #4d4d4d;
   box-shadow:         inset 0 0 5px #4d4d4d;

}

.info-box {
    position: relative; 
    border-left: 1px solid #e3e3e3;
    padding: 15px;
    width: 170px;
    font-size: 0.93em;
    color: #363636;
    float: left;
}

了解しました。この情報ボックスが行の中にあります。.row：hoverで、内側の影を作成しています。行にカーソルを合わせると、情報ボックスの左側の境界線が影の上に表示されているように見えます。

私の質問は、境界線の上に影を付けることができるかどうかです。前もって感謝します。

注：z-indexは私には機能しません。

4

1 に答える 1

1

もちろん、それは一番上にあります。子は親の上に表示される必要があります。そうしないと、子が非表示になります。目的の効果を得るには、上に来た要素、つまり後の要素に影を付ける必要があります.info-box。:after 疑似要素を使用することにより、追加のマークアップなしでこれを実現できます。

このフィドルを見ると、基本的な提案が達成されています。ただし、境界線を疑似要素にシフトしたり、寸法を調整して適切な位置に配置したりすることもできます。

私がしたことの基本的なガイド：

  1. .rowCSSを与えて、それposition: relativeに関連して子を配置できるようにしました。
  2. ルールのbackgroundプロパティ以外のすべて.row:hoverを新しい.row:hover:afterルールに移動しました。
  3. content: ' '疑似要素を強制的に表示するために追加されました。
  4. 位置、高さと幅、上下を追加して、疑似要素カバーを使用可能な幅にしました。

編集：フェリペはコメントの中で、クリックしてオブジェクトにアクセスしようとすると要素によって傍受されると指摘していますが、問題を軽減するために設定されたポインタイベントを使用できることを示唆しています（ IEとOpera以外のすべてで）。これを実際に表示するように例を更新しました。.row:afterpointer-events: none

于 2013-02-19T21:23:33.117 に答える