Question

当我左边的列表div悬停在上面时，我已经编写了应该隐藏页面中间容器div的CSS。我有一种感觉，给容器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。要显示section以外的.list，我在float: left;上使用了.list。

工作示例：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，而不是在position: absolute上使用.container来获取它位于.list旁边。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: