html - 将鼠标悬停在一个 div 上使另一个消失

Question

通过将鼠标悬停在另一个 div 上使一个 div 消失的最佳方法是什么？

使用下面提供的代码，当我使用它时.icon:hover + .info { display:none)，它只是在下面显示该 div 而不是让它消失。我不确定 html 中 div 的位置是否会影响这一点，或者我在 css 中可能犯的错误

.profile-container {
  background: #000;
  height: 400px;
}

.profile-info-box {
  position: absolute;
  bottom: 0px;
  height: 60px;
  width: 100%;
  left: 0;
  right: 0;
}

.info {
  position: relative;
  width: 80%;
  padding: 1.6% 6%;
  float: left;
  color: #000;
  background: #fff;
}

.twitter {
  position: relative;
  float: left;
  width: 25%;
}

.google {
  position: relative;
  float: left;
  width: 25%;
}

.linkedin {
  position: relative;
  float: left;
  width: 25%;
}

.facebook {
  position: relative;
  float: left;
  width: 25%;
}

.icon {
  position: relative;
  width: 20%;
  background: #d00009;
  float: left;
  padding: 20px;
  z-index: 999;
  color: #fff;
}

.icon:hover+.info {
  display: none;
}

.social i {
  padding: 15px;
}

fa fa-share-alt {
  color: #333!important;
}

.icon:hover+.social {
  display: block;
}

.icon:hover+.social {
  display: block!important;
}

.icon:hover {
  background: #fff;
  color: #d00009;
}

.social {
  display: none;
  position: relative;
  width: 80%;
  padding: 3% 6%;
  float: left;
  color: #fff;
  background: #d00009;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container_fluid section-3-bg">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="col-md-12 profile-container">
          <div class="profile-info-box">
            <div class="icon">
              <i class="fa fa-share-alt"></i>
            </div>
            <div class="social">
              <div class="twitter"><i class="fa fa-twitter"></i></div>
              <div class="facebook"><i class="fa fa-facebook"></i></div>
              <div class="google"><i class="fa fa-google"></i></div>
              <div class="linkedin"><i class="fa fa-linkedin"></i></div>
            </div>
            <div id="hide" class="info">
              <p>Staff name<br>Job role</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

标签： htmlcss

Answer 1

由于.info不是 的直接兄弟.icon，选择器.icon:hover + .info将返回一个空集。你想要的是一个通用的兄弟选择器，即~：

.icon:hover ~ .info {
  display: none;
}

请注意，由于 CSS 本质上是级联的，因此兄弟选择器+只有在兄弟元素位于元素之后~时才会起作用。在您的情况下，它会起作用，但是如果您想选择以前的兄弟姐妹，那么使用 CSS 是不可能的。

.profile-container {
  background: #000;
  height: 400px;
}

.profile-info-box {
  position: absolute;
  bottom: 0px;
  height: 60px;
  width: 100%;
  left: 0;
  right: 0;
}

.info {
  position: relative;
  width: 80%;
  padding: 1.6% 6%;
  float: left;
  color: #000;
  background: #fff;
}

.twitter {
  position: relative;
  float: left;
  width: 25%;
}

.google {
  position: relative;
  float: left;
  width: 25%;
}

.linkedin {
  position: relative;
  float: left;
  width: 25%;
}

.facebook {
  position: relative;
  float: left;
  width: 25%;
}

.icon {
  position: relative;
  width: 20%;
  background: #d00009;
  float: left;
  padding: 20px;
  z-index: 999;
  color: #fff;
}

.icon:hover ~ .info {
  display: none;
}

.social i {
  padding: 15px;
}

fa fa-share-alt {
  color: #333!important;
}

.icon:hover+.social {
  display: block;
}

.icon:hover+.social {
  display: block!important;
}

.icon:hover {
  background: #fff;
  color: #d00009;
}

.social {
  display: none;
  position: relative;
  width: 80%;
  padding: 3% 6%;
  float: left;
  color: #fff;
  background: #d00009;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container_fluid section-3-bg">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="col-md-12 profile-container">
          <div class="profile-info-box">
            <div class="icon">
              <i class="fa fa-share-alt"></i>
            </div>
            <div class="social">
              <div class="twitter"><i class="fa fa-twitter"></i></div>
              <div class="facebook"><i class="fa fa-facebook"></i></div>
              <div class="google"><i class="fa fa-google"></i></div>
              <div class="linkedin"><i class="fa fa-linkedin"></i></div>
            </div>
            <div id="hide" class="info">
              <p>Staff name<br>Job role</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>