将鼠标悬停在一个div上可以再次消失

时间：2018-04-25 14:13:11

标签： html css

将一个div悬停在另一个div上会使一个div消失的最佳方法是什么。

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

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

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

请注意，由于CSS本质上是级联的，因此兄弟选择器+和~仅在兄弟来 元素后才起作用。在你的情况下，它会工作，但如果你想选择一个以前的兄弟，那使用CSS是不可能的。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

您在html和css选择器方面处于正确的轨道上。您缺少的是正确的选择器。

+用于选择元素的直接兄弟。您所追求的是~，它将选择任何匹配的兄弟。

例如，.a + .b仅匹配dom中的下一个元素，如果它具有类＆＃34; b＆＃34;，而.a ~ .b将匹配dom中的任何兄弟元素，如果它具有班级＆＃34; b＆＃34;。

因此，我已将您的选择器更改为：

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

修改

可以指定多个选择器来应用规则。为此，您可以使用逗号分隔选择器。我调整了以下选择器：

.icon:hover~.info

和

.icon:hover+.social

到

.icon:hover~.info, .social:hover~.info

和

.icon:hover+.social, .social:hover

当你不再在.icon上空盘旋时，它会变回红色。在不改变html（或添加javascript）的情况下，你无法解决这个问题。

＆＃13;
＆＃13; 
.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;
}

.social:hover+.info,
.icon:hover~.info {
  display: none;
}

.social i {
  padding: 15px;
}

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

.icon:hover+.social {
  display: block;
}
.social:hover,
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题