將鼠標懸停在另一個div上時隱藏div

Question

我已經編寫了應該隱藏頁面中間的容器div的CSS，當左側的列表div被懸停時。 我有一種感覺，給容器div一個固定的位置導致這一點，但我不太確定。代碼似乎是正確的。

的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如果.list將是section.container前面的兄弟只會工作。但是您的section.container被放置在.list之前。

使其工作的唯一方法是在section.container之前放置.list。除了.list之外，爲了顯示section，我在.list上使用了float: left;。

工作例如：https://codepen.io/anon/pen/PmJZgm?editors=1100

注1：你可能必須調整頁邊距/墊襯了一下。

注2：如果您在section之後放置任何內容，當隱藏它時，其餘內容將跳起來。如果你不希望這樣，你可能想嘗試

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

Answer 2

如果移動.list之前.container，你的選擇會工作。我添加了一個父元素（main）到.list和.container，並在父代上使用了flex，而不是在.container上使用position: absolute，以獲得它在.list旁邊。

#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>