子要素のクリックで親要素を非表示にする方法

Question

div要素内のアンカータグをクリックすると、親div要素を非表示にするにはどうすればよいですか。

私はこれをjavascript/jQueryでどのように行うことができるのか知っています。私は感謝

Answer 1

はあなたに感謝します。シンプルなsolution.youは、私はスニペットを入れ

span:active div.parent{background:#eaeaea} 
span:focus div.parent{background:#eaeaea} 

両方のクラスを使用する必要がありますし、あなたの最高のベットはいくつかのハッキングです - そのうちの1つはcheckboxとlabelです。

下記を参照のデモ：

div { 
 
    border: 1px solid red; 
 
} 
 
#checkbox, 
 
#checkbox:checked + div { 
 
    display: none; 
 
} 
 
a { 
 
    border: 1px solid; 
 
    margin:5px; 
 
}

<input type="checkbox" id="checkbox" /> 
 
<div> 
 
    <span> 
 
    <a><label for="checkbox">hello</label></a> 
 
    </span> 
 
    <span> 
 
    <a><label for="checkbox">hi</label></a> 
 
    </span> 
 
</div>

Answer 2

が何をしたいということです純粋なCSSのソリューションを

div { 
 
    border: 1px solid red; 
 
}

<div> 
 
    <span> 
 
    <a>helo</a> 
 
    </span> 
 
    <span> 
 
    <a>hi</a> 
 
    </span> 
 
</div>

を探しています。しかし、これでもマウスボタンが一度表示されると、これが表示されます。

ありますが、それを行うには透明にできる唯一の事はある、しかし、それはまだあるでしょう、そして、あなたはJSせずに完全にこれを達成することはできません。

div { 
 
    border: 1px solid red; 
 
    height: 50px 
 
} 
 
div { 
 
    pointer-events: none; 
 
    opacity:1; 
 
    animation: hide 0.1s linear infinite; 
 
    animation-play-state: paused; 
 
} 
 
div a { 
 
    pointer-events: auto; 
 
} 
 
div:active { 
 
    animation-play-state: running; 
 
} 
 
@keyframes hide { 
 
1%{ 
 
    opacity:0; 
 
    position:absolute; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    position:absolute; 
 
    } 
 
}

<div> 
 
    <span> 
 
    <a>helo</a> 
 
    </span> 
 
    <span> 
 
    <a>hi</a> 
 
    </span> 
 
</div> 
 
Some randow text/element

Answer 3

はあなたが使用することができます。アクティブ、：フォーカス擬似クラス。

それは何を見てすることはCSSで正確にできません