Question

当我将鼠标悬停在另一个div上时，我想更改特定div的样式。我尝试使用CSS来实现这一点，但这不起作用。

我试过了：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

你可以把它变成一个CSS（让脚本做悬停感觉非常不必要）。

在这里，我稍微改变了你的标记（（快速而肮脏以证明概念）），你将如何做。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我假设你指的是这个：

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

不幸的是，CSS无法实现这一点。

元素不共享父级，因此~一般兄弟选择器不起作用......因为他们不是兄弟姐妹。

此处的一个选项是执行您在标题中实际描述的内容...将悬停放在父div上。

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

JSfiddle Demo

Answer 3

div 1（你悬停的那个）div 2（你要改变的那个）

.div1:hover .div2
{YOUR STYLE HERE}

Div on hover使用css更改其他div

3 个答案: