html - css悬停改变非悬停div

Question

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

CSS

.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 div 时，我怎样才能做到这一点，任何 .checked 的 div - 都变成非红色，即 - .rb ?

Answer 1

使用 jquery，你可以尝试类似的东西；

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

Here 是一个工作演示。