Как скрыть родительский элемент при щелчке дочернего элемента

Question

Как скрыть элемент родительского div, нажав на тег привязки в элементе div.

Я знаю, как мы можем это сделать в javascript/jQuery. Я ищу чистого раствора CSS

div { 
 
    border: 1px solid red; 
 
}

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

Благодарности

Answer 1

То, что вы ищите не совсем возможно в CSS, и ваш лучший ставка - это некоторые хаки - один из них использует 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

Это то, что вы хотите. Но все же это сделает его видимым, как только кнопка мыши будет нажата.

Существует только одна вещь, которую вы можете сделать, сделать его прозрачным, но это все еще будет там, и вы не можете достичь этого совершенно без 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

вы можете использовать: active,: focus pseudo class.

это просто solution.you использовать оба класса

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

я поставил сниппет в.

спасибо