在懸停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

回答

相關問題