1

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

我们这里有 3 个圆圈。

每当我在类 Name Mycircle 的圆圈上执行鼠标悬停时，类 Name 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/

提前致谢

4

2 回答 2

5

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

出于这个原因，接受答案中的一般兄弟组合子不适合，因为该.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支持伪选择器。

于 2013-10-12T14:51:39.023 回答
1

不，仅使用 css 是不可能的。“任何兄弟”选择器在 css 中不存在。

但是，如果您可以将 BigCircle 移动到末尾，则可以使用可以选择后继兄弟的通用兄弟组合器。

.mycircle:hover ~ .BigCircle{background:red}
于 2013-10-12T14:04:12.670 回答