css - 親divブロックの内部要素が選択されないようにする

Question

私は次のHTMLを持っています:

<div class="parent">
    <span>Random Elements</span>
    <img src="RandomeImage.png" />
    <etc...>
</div>

親 div とその子要素が 1 つのエンティティとして機能するようにしたいと考えています。したがって、たとえば、子要素を選択 (強調表示) することはできません。また、どこか (div 内、子または空白) でクリック イベントが親クリックをトリガーすることもできません。

非常に多くの CSS (ブロック、フロートなど) を試しましたが、最終的な解決策がわかりませんでした。よろしくお願いします。

Answer 1

要素を選択するのではなく、強調表示するだけです。Jquery（Javascriptフレームワーク）を使用して実行できることをお勧めします。

コードは次のとおりです。

 $('.yourdiv').click(function(){
 $('.yourdiv').css("background-color","");
 $(this).css("background-color","blue");
 });​

Answer 2

これを行うためにJavaScriptを使用したくない場合は、divを作成してposition:absoulte;親全体とそのすべての子を覆い、すべてのクリックイベントを停止することができます

これがそのアプローチのデモです

追加された HTML 要素: <div id='cover'></div>

そして追加された CSS:

.parent {
    background:teal;
    height: 500px;
    width:650px;
}
#cover {
    position:absolute;
    top:0; /* Same as object to cover up */
    left:0; /* Same as object to cover up */
    height:500px; /* Same as object to cover up */
    width:650px; /* Same as object to cover up */
    z-index:2; /* Higher than the object to cover up */
}