仅 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}

这是演示> 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元素悬停时使用伪选择器向页面添加一个新元素：

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

HTML

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

CSS

/* 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;
}

这个解决方案的不完美之处在于我们的目标是父元素的第一个子元素的位置，而不是具有类名的元素.bigCircle。此外，IE7不支持after伪选择器。