Hide ein Div beim Schweben über einem anderen div

Question

Ich habe CSS geschrieben, die das Container-div in der Mitte der Seite ausblenden sollte, wenn die Liste div auf der linken Seite über ist. Ich habe das Gefühl, dass das, wenn ich dem Container div eine feste Position gebe, dies verursacht, aber ich bin mir nicht ganz sicher. Der Code scheint korrekt zu sein.

Html

<section class="container"> 

    <div class="description"> 
    <h2>Writer</h2> 
    <p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis. Mi elit ante nunc, mi odio congue rhoncus dui quis dictum, lectus eleifend aliquam sed venenatis vitae lorem, potenti non dictum sit. Condimentum nonummy vitae tristique, pede nullam pretium arcu vestibulum dictum</p> 
    <p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis.</p> 
    </div> 

</section> 

<div class="list"> 

<ul class="projectList"> 
    <li class="projectImage"><a href="#">Philomena Kwao<span><img src="helene images/philomena.jpg" alt="" height="" width="" /></span></a></li> 

    </ul> 

</div> 
<div> 

Css

.container { 
    position:absolute; 
    justify-content:center; 
    align-items:center; 
    box-sizing:border-box; 
    display:flex; 
    width:500px; 
    left:325px; 
    align-content:space-around; 
} 

.list { 
    width:325px; 
    margin: 20px 30px 20px 0; 
    box-sizing:bordr-box; 
    overflow-x:hidden; 
} 

ul { 
    list-style-type:none; 
    margin:0; 
    padding:0 
} 

.projectImage img { 
    display:none; 
} 

.list .projectImage:hover img { 
    display: block; 
    margin: 0; 
    top: 20%; 
    left: 50%; 
    transform: translate(-50%); 
    position: absolute; 
    display: block; 
    /* width: 100%; 
    height: 100%; */ 
} 

.list:hover + section.container { 
    display: none; 
} 

Answer 1

.list:hover + section.container nur funktionieren würde, wenn die vorhergehenden .list Geschwister von section.container seien. Aber Ihre section.container ist vor .list platziert.

Der einzige Weg, um es zum Laufen zu bringen, ist .list vor section.container zu setzen. Um section neben .list anzuzeigen, habe ich float: left; auf .list verwendet.

Arbeitsbeispiel: https://codepen.io/anon/pen/PmJZgm?editors=1100

Anmerkung 1: Sie könnten die Margen/Polsterungen ein bisschen zwicken müssen.

Hinweis 2: Wenn Sie Inhalte nach section platzieren, springt der Rest des Inhalts nach oben. Wenn Sie dies nicht wollen, wollen Sie wahrscheinlich

.list:hover + section.container { 
    opacity: 0; 
} 

Answer 2

, um zu versuchen, wenn Sie .list vor .container bewegen, wird Ihre Wähler arbeiten. Ich fügte ein Elternelement (main) zu .list und .container hinzu und verwendete flex auf dem Eltern statt position: absolute auf .container, um es neben .list zu erhalten.

#helene, body, html { 
 
    width:100% 
 
} 
 

 
body { 
 
    background-color:#FFFAF1; 
 
} 
 

 
#site { 
 
    height:100%; 
 
    width:100%; 
 
    box-sizing:border-box; 
 
    vertical-align:middle; 
 
    overflow:hidden; 
 
    display:block; 
 
} 
 

 
.title { 
 
    position:fixed: 
 
    z-index:10; 
 
    text-align:center; 
 
} 
 

 
.container { 
 
    justify-content:center; 
 
    align-items:center; 
 
    box-sizing:border-box; 
 
    display:flex; 
 
    flex: 0 0 500px; 
 
    align-content:space-around; 
 
} 
 

 
.list { 
 
    flex: 0 0 325px; 
 
    margin: 20px 30px 20px 0; 
 
    box-sizing:bordr-box; 
 
    overflow-x:hidden; 
 
} 
 

 
ul { 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0 
 
} 
 

 
.projectImage img { 
 
    display:none; 
 
} 
 

 
.list .projectImage:hover img { 
 
    display: block; 
 
    margin: 0; 
 
    top: 20%; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
    position: absolute; 
 
    display: block; 
 
    /* width: 100%; 
 
    height: 100%; */ 
 
} 
 

 
.list:hover + section.container { 
 
    display: none; 
 
} 
 

 
main { 
 
    display: flex; 
 
}

<div id="helene"> 
 

 
    <div id="site"> 
 

 
    <header class="title"> 
 
     <h1> Helene Selam Kleih</h1> 
 
    </header> 
 

 

 
    <main> 
 

 
     <div class="list"> 
 

 
     <h2>In Conversation With-</h2> 
 
     <ul class="projectList"> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="helene images/philomena.jpg" alt="" height="" width="" /></span></a></li> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></a></li> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></a></li> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></a></li> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></a></li> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></a></li> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></a></li> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></a></li> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></a></li> 
 
     </ul> 
 

 
     <h2>Articles - </h2> 
 
     <ul class="projectList"> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></a></li> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></a></li> 
 
      <li class="projectImage"><a href="#">Philomena Kwao<span><img src="" alt="" height="" width="" /></span></a></li> 
 
     </ul> 
 

 
     </div> 
 

 
     <section class="container"> 
 

 
     <div class="description"> 
 
      <h2>Writer</h2> 
 
      <p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis. Mi elit ante nunc, mi odio congue 
 
      rhoncus dui quis dictum, lectus eleifend aliquam sed venenatis vitae lorem, potenti non dictum sit. Condimentum nonummy vitae tristique, pede nullam pretium arcu vestibulum dictum</p> 
 
      <p>Lorem ipsum dolor sit amet, suspendisse nam habitasse pellentesque arcu quae dignissim, amet magna diam aenean. Amet ipsum aenean, massa posuere maecenas nam lectus nibh lacus, nisl lacus magna nullam leo quis.</p> 
 
     </div> 
 

 
     </section> 
 

 
    </main> 
 

 
    </div> 
 

 
</div>