在悬停Div改变其他股利用css

我想改变一个特定的div的样式，当悬停在另一个div。我尝试使用CSS来实现这一目标，但这不起作用。在悬停Div改变其他股利用css

我尝试这样做：

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

来源

2016-02-29 Henk Z

你可以让这只是一个CSS（有脚本来执行悬停感觉很没必要）。

在这里，我改变了你的标记一点点（（快速和肮脏的证明概念）），你怎么做。

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

来源

2016-02-29 17:17:37 LGSon

我假设你指的是这样的：

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

不幸的是，这”不是个t可能与CSS。

这些元素不共享父项，因此您的~一般兄弟选择项将不起作用...因为它们的不是兄弟。

这里的一个选择是做你实际在你的标题中描述的...把悬停在父div上。

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

JSfiddle Demo

来源

2016-02-29 16:23:23

这就是我已经想到。我该如何解决这个问题？ –

一般来说，JavaScript。 –

DIV 1（将鼠标悬停在一个）DIV 2（要改变的人）

.div1:hover .div2 
{YOUR STYLE HERE}

来源

2016-02-29 16:48:02

在悬停Div改变其他股利用css

回答

相关问题