将鼠标悬停在另一个 div 上时隐藏 div

Question

我写的 CSS 应该隐藏页面中间的容器 div，当左侧的列表 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之前。

让它工作的唯一方法是将 .list 放在 section.container 之前。为了在 .list 之外显示 section，我在 .list 上使用了 float: left;。

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

注意 1： 您可能需要稍微调整一下 margins/paddings。

注2：如果在section之后放置任何内容，隐藏时其余内容会跳起来。如果你不想要这个，你可能想试试

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

Answer 2

如果您将 .list 移到 .container 之前，您的选择器将会起作用。我向 .list 和 .container 添加了一个父元素 (main) 并在父元素上使用 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>

将鼠标悬停在另一个 div 上时隐藏 div

Hide a div when hovering over another div

css

hover

display