僅CSS-將：hover懸停在任何同級上時，使第一個元素更改顏色

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

在注釋中，您聲明不能重新排列元素，但是可以根據需要添加元素。

出於這個原因在接受的答案一般的兄弟combintor不適合作為.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;
}

此解決方案的問題在於，當您將hover在父對象上的任意位置（而不僅僅是.myCircle上）時， .bigCircle元素將變為紅色。 添加浮點數會減少這種效果-但是，如果將鼠標懸停在圓圈之外，則.bigCircle仍將為紅色。

解決方案2

使用父元素作為relative容器，當.myCircle元素懸停在上方時，我們可以使用after偽選擇器向頁面添加新元素：

工作示例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偽選擇器。

Answer 2

不。僅使用CSS是不可能的。 CSS中沒有“任何同級”選擇器。

但是，如果可以將BigCircle移到末尾，則可以使用常規的同級組合器，該組合器可以選擇后繼同級。

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