CSS懸停改變非盤旋的div

<div class='checked' id='rb01'></div> 
<div class='rb' id='rb02'></div> 
<div class='rb' id='rb03'></div> 
<div class='rb' id='rb04'></div>

CSSCSS懸停改變非盤旋的div

.rb{ 
    display:inline-block; 
    width:12px; 
    height:12px; 
    background-color:#ffffff; 
    border-radius:50%; 
    margin:0 5px; 
    cursor:pointer; 
} 
.rb:hover { 
    background-color:#B30000; 
    border:2px solid #ffffff; 
} 
.checked{ 
    display:inline-block; 
    width:12px; 
    height:12px; 
    border-radius:50%; 
    margin:0 5px; 
    cursor:pointer; 
    background-color:#B30000; 
    border:2px solid #ffffff; 
}

所以盤旋.rb DIV就變成紅色，它的工作原理。
但是，我怎樣才能做到這一點，當懸停.rb股利，任何股利是.checked - 變成非紅色，即 - .rb？

來源

2013-10-11 bonaca

javascript/jquery？或ccs3的一些超酷功能我猜 – kajacx

使用jQuery，您可以嘗試類似;

$(".rb").mouseover(function() { 
    $(".checked").css('background-color', 'blue'); 
}).mouseout(function() { 
    $(".checked").css('background-color', 'red'); 
});

Here是一個工作演示。

來源

2013-10-11 09:48:10

由於.rb和.checked容器沒有嵌套也沒有關聯，因此您要查找的內容可能是某些javascript解決方案。

jQuery provides a .hover() method你可以使用它來實現你的目標只有幾行（例如，懸停.rb元素，你可以爲.checked div添加額外的CSS類，並且你可以爲此定義非紅色樣式.checked.new-class在你的CSS，你就會有它使:)

來源

2013-10-11 09:38:01 versvs

謝謝，versvs，我明白了。 – bonaca

不客氣:) – versvs

你可以給CSS這樣

.rb:not(.checked):hover { do css here}

來源

2013-10-11 09:41:32

'.rb' div從不''.checked'。 – versvs

你正確@versvs –

CSS懸停改變非盤旋的div

回答

相關問題