Div on hover change other div using css

Question

I want to change the styling of a specific div, when hovering over another div. I try to use CSS to achieve this, but that does not work.

I tried this:

.contact-blocks li .contact-block.icon span i {
  border-radius: 50px;
  border: 2px solid #e3e3e3;
}
.contact-blocks li .contact-block.icon {
  display: inline-block;
  float: left;
  width: 65px;
}
.contact-blocks li .contact-block.text {
  display: inline-block;
}
.contact-blocks li .contact-block.text h3 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.contact-blocks li {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  width: 49%;
  display: inline-block;
}
.contact-blocks li .contact-block.icon span.icon-facebook i {
  color: #777777;
  padding: 13px 17.5px;
  font-size: 20px;
}
.contact-blocks li .contact-block.icon span.icon-facebook i:hover {
  background: #3b5998;
  border: 2px solid #3b5998;
  color: #ffffff;
}
#facebook-title:hover ~ #facebook-icon {
  background: #3b5998;
}

<ul class="contact-blocks">
  <li>

    <div id="a" class="contact-block text">
      <h3><a id="facebook-title" target="_blank" href="https://www.facebook.com">Facebook</a></h3>
      <a target="_blank" href="https://www.facebook.com">Contact us at Facebook</a>
    </div>

    <div id="b" class="contact-block icon">
      <a target="_blank" href="https://www.facebook.com">
        <span class="contact-icon icon-facebook"><i id="facebook-icon" class="fa fa-facebook"></i></span>
      </a>
    </div>

  </li>

</ul>

JSFIDDLE: https://jsfiddle.net/36sa7t63/3/

Asons · Accepted Answer · 2016-02-29 17:17:37Z

You can make this a CSS only (having script to do hover feels very unnecessary).

Here I changed your markup a little ((quick and dirty to prove concept)), how you could do.

.contact-blocks li .contact-block.icon span i {border-radius: 50px; border: 2px solid #e3e3e3;}
.contact-blocks li .contact-block.icon {
  position: absolute; left: 5px; top: 30px; height: 65px; width: 65px;
  }
.contact-blocks li .contact-block.text {display: inline-block;}
.contact-blocks li .contact-block.text a:first-child {display: block; font-size: 24px;}
.contact-blocks li {list-style: none; padding: 0; margin-bottom: 20px; width: 49%; display: inline-block;}
.contact-blocks li .contact-block.icon span.icon-facebook i {color: #777777; padding: 13px 17.5px; font-size: 20px;}
.contact-blocks li .contact-block.icon span.icon-facebook i:hover {background: #3b5998; border: 2px solid #3b5998; color: #ffffff;}

#facebook-title:hover ~ .contact-block #facebook-icon {background: #3b5998;}

<ul class="contact-blocks">
  <li>

    <div id="a" class="contact-block text">
      <a id="facebook-title" target="_blank" href="https://www.facebook.com">Facebook</a>
      <a target="_blank" href="https://www.facebook.com">Contact us at Facebook</a>
      
      <div id="b" class="contact-block icon">
        <a target="_blank" href="https://www.facebook.com">
          <span class="contact-icon icon-facebook"><i id="facebook-icon" class="fa fa-facebook"></i></span>
        </a>
      </div>
    </div>

  </li>

</ul>

Paulie_D · Accepted Answer · 2016-02-29 16:31:53Z

0

I'm assuming you are referring to this:

#facebook-title:hover ~ #facebook-icon {background: #3b5998;}

Unfortunately, this isn't possible with CSS.

The elements do not share a parent so your ~ general sibling selector will not work...because they aren't siblings.

One option here is to do what you actually describe in your title...put the hover on the parent div.

.contact-block.text:hover + .contact-block.icon #facebook-icon {
  background: your styles here;
}

JSfiddle Demo

edited Feb 29, 2016 at 16:31

answered Feb 29, 2016 at 16:23

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

1 Comment

Paulie_D Over a year ago

Generally, javascript.

Itay Joseph · Accepted Answer · 2016-02-29 16:48:02Z

0

div 1 (The one you hover) div 2 (the one you want to change)

.div1:hover .div2
{YOUR STYLE HERE}

answered Feb 29, 2016 at 16:48

Itay Joseph

231 silver badge8 bronze badges

Collectives™ on Stack Overflow

Div on hover change other div using css

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related