Hover over one div make another disapear-Twitter bootstrap

user9334298
April 25, 2018
175 views
1 vote
2 Answers

What is the best method to make one div disappear by hovering over another.

with the code provided below, when I used .icon:hover + .info { display:none) It just displays that div underneath rather than making it disappear. I’m unsure whether the placements of the divs in the html are affecting this or a mistake I could of made in the 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>

Tags: css html

Answers

Since .info is not a direct sibling of .icon, the selector .icon:hover + .info will return an empty set. What you want is a general sibling selector, i.e. ~:

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

Note that since CSS is cascading in nature, the sibling selectors + and ~ will only work when the sibling comes after the element. In your case it will work, but if you want to select a previous sibling, that is not possible using 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>

You’re on the right track in terms of html and css selectors. What you’re missing is the correct selector.

+ is used to select the immediate sibling of the element. What you are after is ~ which will select any matching sibling.

For example .a + .b will ONLY match the next element in the dom IF it has the class “b”, whereas .a ~ .b will match ANY sibling element in the dom if it has the class “b”.

As such, I’ve changed your selector to:

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

Edit

It is possible to specify multiple selectors to apply a rule to. To do this, you separate the selectors with a comma. I have tweaked the following selectors:

.icon:hover~.info

and

.icon:hover+.social

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

and

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

As you are no longer hovering over .icon it turns back to red. Without altering the html (or adding javascript) there is nothing you can do to fix that.

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

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

Please signup or login to give your own answer.

Click here to cancel reply.