仅限CSS - 在以下情况下使第一个元素更改颜色：将鼠标悬停在任何兄弟上

Question

我想使用仅限CSS

进行解决方案

我们这里有3圈。

每当我在类名为Mycircle的圆圈上执行鼠标悬停时，类名为BigCircle的圆圈应更改为红色

HTML

<div class="BigCircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>

CSS

.mycircle,.BigCircle{width:50px; height:50px; border-radius:30px; background-color:grey; margin:3px}
.mycircle:hover{background:yellow}

.mycircle:hover .BigCircle{background:red}

以下是演示＆gt; http://jsfiddle.net/JGbDs/4/

先谢谢

Answer 1

在您的评论中，您声明无法重新排列元素，但您可以根据需要添加元素。

由于这个原因，接受的答案中的一般兄弟组合不适合，因为.bigCircle元素必须在所有.myCircle元素之后。

没有使用CSS实现此目的的完美方法，但可以通过添加“父”元素并使用以下CSS解决方案之一来实现：

解决方案1 ​​

当悬停在父元素上时，.bigCircle子元素将显示为红色：

工作示例：http://jsfiddle.net/CKRef/

HTML

<div class="parent">
    <div class="bigCircle"></div>
    <div class="mycircle"></div>
    <div class="mycircle"></div>
</div>

CSS

/* Add float to parent to fit width to content */
.parent {
    float: left;
    clear: both;
}

.parent:hover > .bigCircle{ 
    background: red;
}

此解决方案的问题在于.bigCircle元素在您hover父母的任何位置时都会显示为红色，而不仅仅是.myCircle。添加浮动会降低此效果 - 但如果您将鼠标悬停在圆圈之外，则.bigCircle仍将为红色。

解决方案2

使用父元素作为relative容器，我们可以在after元素悬停在.myCircle元素时使用<div class="parent"> <div class="mycircle"></div> <div class="mycircle"></div> <div class="mycircle"></div> </div> 伪选择器向页面添加新元素：

工作示例http://jsfiddle.net/CKRef/1/

HTML

/* replaced .bigCircle with mycircle:hover::after */ 
.mycircle, .mycircle:hover::after {
    ....
}

.parent {
    position: relative;
}

.mycircle:hover::after { 
    content: "";
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0;
}

CSS

.bigCircle

这个解决方案的缺点是我们的目标是父元素的第一个子元素的位置，而不是具有类名after的元素。此外，IE7中支持<{1}}伪选择器 。

Answer 2

没有。只使用css是不可能的。 “任何兄弟”选择器在css中都没有。

但是，如果您可以将BigCircle移动到最后，您可以使用可以选择继承兄弟姐妹的通用兄弟组合器。

.mycircle:hover ~ .BigCircle{background:red}