schließen Behälter mit reinem css: Zielselektor

Question

Ich habe folgende html:

ich, dass display: none; anwenden möchten, wenn die :target angetroffen wird.

Wenn ich nicht :hover verwenden, das funktioniert gut, wie Sie das zweite Beispiel der hinzugefügten Geige einchecken können, aber wenn ich Hover hinzufügen, funktioniert das nicht und ich verstehe nicht warum: |

#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

Sie benötigen die Spezifität der Wähler zu erhöhen, indem #container Zugabe zu verstecken -

#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

Eigentlich nicht wirklich möglich, dass der Behälter wieder zu haben, aufgefordert, auf schweben mit: Zielselektor. Ich schlage vor, Sie zu verwenden: aktiv stattdessen. Funktioniert wie Charme.

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>