Закрыть контейнер с чистым CSS с помощью: селектор целей

Question

У меня есть следующий HTML:

Я хочу, чтобы применить это display: none; когда :target встречается.

Если я не использую :hover, который отлично работает, как вы можете проверить второй пример добавленной скрипки, но если я добавлю зависание, которое не работает, и я не понимаю, почему: |

#test1:target { 
 
    display: none; 
 
} 
 
#container:hover #test1 { 
 
    display: block 
 
} 
 
#test1 { 
 
    display: none; 
 
    height: 50px; 
 
    border: 1px dashed orange; 
 
    background: green; 
 
    padding: 10px; 
 
}

<div id="container"> 
 
    HOVER ME 
 
    <div id="test1"> 
 
    <a href="#test1">CLOSE ME</a> 
 
    <p> 
 
     CLOSE THIS CONTENT 
 
    </p> 
 
    </div> 
 
</div>

Here is the fiddle:

Answer 1

Вам нужно увеличить специфичность селектора, добавив #container, чтобы скрыть это -

#container:hover #test1:target { 
    display: none; 
} 

body{padding:20px;} 
 
#container{ 
 
    border: 1px solid lime; 
 
    padding: 10px; 
 
    width: 200px; 
 
} 
 
#container:hover #test1:target { 
 
display: none; 
 
} 
 
#container:hover #test1, #container:hover #test2{display: block} 
 
#test1{ 
 
    display: none; 
 
    height: 50px; 
 
    border: 1px dashed orange; 
 
    background: green; 
 
    padding: 10px; 
 
} 
 

 

 
#container:hover #test2:target { 
 
display: none; 
 
} 
 
#test2{ 
 
    display: none; 
 
    height: 50px; 
 
    border: 1px dashed orange; 
 
    background: green; 
 
    padding: 10px; 
 
}

<!--example one with hover not working--> 
 
<div id="container"> HOVER ME 
 
<div id="test1"> 
 
<a href="#test1">CLOSE ME</a> 
 
<p>CLOSE THIS CONTENT</p> 
 
</div> 
 
</div> 
 
<hr> 
 

 
<!--example two without hover it's working--> 
 
<div id="container"> DISPLAYED 
 
<div id="test2"> 
 
<a href="#test2">CLOSE ME 2</a> 
 
<p>CLOSE THIS CONTENT 2</p> 
 
</div> 
 
</div>

Fiddle updated - http://jsfiddle.net/afelixj/adzFe/2839/

Answer 2

На самом деле не представляется возможным, чтобы иметь, что контейнер снова запрашивать при наведении курсора мыши с помощью: селектор цели. Я предлагаю вам использовать: active. Работает как шарм.

body { 
 
    padding: 20px; 
 
} 
 
.container { 
 
    border: 1px solid lime; 
 
    padding: 10px; 
 
    width: 200px; 
 
} 
 
.container:hover .test1:active { 
 
    display: none; 
 
} 
 
.container:hover .test1 { 
 
    display: block 
 
} 
 
.test1 { 
 
    display: none; 
 
    height: 50px; 
 
    border: 1px dashed orange; 
 
    background: green; 
 
    padding: 10px; 
 
    pointer-events: none; 
 
} 
 
.bubu { 
 
    pointer-events: auto; 
 
}

<div class="container"> 
 
\t Drop down menu 
 
\t <div class="test1"> 
 
\t \t <a class="bubu" href="#">CLOSE ME</a> 
 
\t \t <p class="content"> 
 
\t \t \t CLOSE THIS CONTENT 
 
\t \t </p> 
 
\t </div> 
 
</div>