将鼠标悬停在另一个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>