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

所以悬停一个.rbdiv 它会变成红色并且它可以工作。
但是，我怎样才能做到这一点，当悬停一个.rbdiv 时，任何 div 是.checked- 变成非红色，即 - .rb？

4

3 回答 3

2

由于.rb和.checked容器既不嵌套也不相关，您正在寻找的可能是一些javascript解决方案。

jQuery 提供了一个 .hover() 方法，你可以用它来实现你的目标，只需要几行（比如，在悬停 .rb 元素时，你可以为 .checked div 添加一个额外的 CSS 类，并提供你定义非红色在你的 css 中使用它的样式.checked.new-class，你会得到它的 :)

于 2013-10-11T09:38:01.937 回答
2

使用 jquery，您可以尝试类似的方法；

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

这是一个工作演示。

于 2013-10-11T09:48:10.130 回答
0

你可以像这样给css

.rb:not(.checked):hover { do css here}
于 2013-10-11T09:41:32.403 回答