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

我想要只使用CSS的解决方案

我们这里有三个圆圈

每当我在类名为Mycircle的圆上执行鼠标操作时，类名为BigCircle的圆应该变为红色

html

这是演示>

---

提前感谢

不。仅使用css是不可能的。css中没有“任何同级”选择器

然而，若您可以将BigCircle移动到末尾，那个么您可以使用通用同级组合器来选择后续同级

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

---

不，仅仅使用css是不可能的。css中没有“任何同级”选择器

然而，若您可以将BigCircle移动到末尾，那个么您可以使用通用同级组合器来选择后续同级

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

---

在注释中，您声明不能重新排列元素，但可以根据需要添加元素

因此，接受答案中的一般同级组合器不适合作为

.bigcirle

元素，它必须位于所有

.myCircle

元素之后

仅使用CSS无法实现这一点，但可以通过添加“父”元素并使用以下CSS解决方案之一来实现：

解决方案1 将鼠标悬停在父元素上时，

.bigCircle

子元素将变为红色：

工作示例：

HTML 此解决方案的问题是，当您将

鼠标悬停在父对象上的任何位置时，
.bigCircle
元素将变为红色，而不仅仅是在
.myCircle
上。添加浮点数会减少这种效果-但是如果您将鼠标悬停在圆圈的正外部，则
.bigCircle
仍将是红色

解决方案2
将父元素用作
相对
容器，当
.myCircle
元素悬停在上方时，我们可以使用
after
伪选择器向页面添加新元素：

工作示例

HTML
此解决方案的缺陷在于，我们的目标是父元素的第一个子元素的位置，而不是类名为
.bigcirle
的元素。此外，IE7中不支持
之后的
伪选择器。
在注释中，您声明无法重新排列元素，但可以根据需要添加元素

因此，接受答案中的一般同级组合器不适合作为
.bigcirle
元素，它必须位于所有
.myCircle
元素之后

仅使用CSS无法实现这一点，但可以通过添加“父”元素并使用以下CSS解决方案之一来实现：

解决方案1
将鼠标悬停在父元素上时，
.bigCircle
子元素将变为红色：

工作示例：

HTML
此解决方案的问题是，当您将
鼠标悬停在父对象上的任何位置时，
.bigCircle
元素将变为红色，而不仅仅是在
.myCircle
上。添加浮点数会减少这种效果-但是如果您将鼠标悬停在圆圈的正外部，则
.bigCircle
仍将是红色

解决方案2
将父元素用作
相对
容器，当
.myCircle
元素悬停在上方时，我们可以使用
after
伪选择器向页面添加新元素：

工作示例

HTML
此解决方案的缺陷在于，我们的目标是父元素的第一个子元素的位置，而不是类名为
.bigcirle
的元素。此外，IE7中不支持
after
伪选择器。
能否修改HTML中
div
的顺序？我的意思是，你是在寻找一个没有改变标记的纯CSS解决方案吗？如果加价可以改变，你可以试试。@Harry不。。我想要相同的顺序，但是如果你想要的话，你可以添加一些html元素see@AndréSantos谢谢兄弟能修改html中
div
的顺序吗？我的意思是，你是在寻找一个没有改变标记的纯CSS解决方案吗？如果加价可以改变，你可以试试。@Harry不。。我想要相同的订单，但是如果你想要，你可以添加一些html元素see@AndréSantos谢谢兄弟，我需要与我发送相同的订单。我需要相同的标记，但你可以通过添加额外的html元素来完成吗？我需要与发送相同的顺序。我需要相同的标记，但是你能通过添加额外的html元素来实现吗
.mycircle:hover ~ .BigCircle{background:red}

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

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

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

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

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