將css規則應用到其他元素

我不認爲有一個當前的SO問題來解決這個問題;但如果有請指向我，我會關閉這一個。將css規則應用到其他元素

不管怎麼說，假設HTML這樣的：

<div> 
    <div class="a" style="float:left;"></div> 
    <div class="b" style="float:left;"></div> 
    <div class="c" style="float:left;"></div> 
    <div style="clear:both;"></div> 
</div>

是否有任何CSS規則我可以定義懸停時改變樣式的其他元素。所以，就像

.a:hover { 
    // change bg colors of .b and .c 
    }

我知道我可以做這與懸停事件在JavaScript中;但我希望只有一個CSS解決方案。如果你可以指出某些部分的css規範說這是不可能的，那麼我仍然會將其標記爲答案。（儘管我承認我沒有讀完整篇文章，但我確實讀了一些）。

編輯：每個人都標記爲seemm的答案是正確的答案;但它們在Chrome/Safari中不起作用（但IE8很好......去圖：P）。在這裏看到：Why doesn't this CSS selector work: a:hover ~ span?

來源

2011-05-07 Dave

是否有任何CSS規則我可以定義徘徊

時改變風格等元素，你可以在這種情況下使用adjacent sibling selectors（因爲B和C 遵循一）。

.a:hover + .b, 
.a:hover + .b + .c { }

您也可以使用general sibling combinator從CSS 3

.a:hover ~ div {}

雖然這仍然有你徘徊的元素是第一要求。

我知道我可以在javascr與單擊事件做到這一點

鼠標懸停事件會更有意義

如果你可以指向CSS規範的某些部分，說這是不可能

規格告訴你什麼是可能的。他們很少國家不能做什麼（因爲提供什麼是不可能會做出巨大的所有規格的詳盡列表）

來源

2011-05-07 06:24:18 Quentin

WebKit已知有'：hover'和'〜'的問題。我不確定這是否在最新的Safari和Chrome版本中得到修復。 HTTP：//計算器。com/questions/5061509/why-doesnt-this-css-selector-work-ahover-span – BoltClock 2011-05-07 06:30:49

任何用CSS 3標記的東西都應該被認爲在很多瀏覽器中都存在問題:) – Quentin 2011-05-07 06:36:18

嘿，那是真的:) – BoltClock 2011-05-07 06:36:44

使用此：

.a:hover + .b, 
.a:hover + .b + .c, 
{ 
    // styles of .b and .c 
}

更多關於兄弟組合子：http://www.w3.org/TR/css3-selectors/#sibling-combinators

來源

2011-05-07 06:25:38

Myabe它會幫助你一點：

.a:hover + .b { 
    background-color:red; 
} 
.a:hover + .b + .c { 
    background-color:red; 
}

觀察結果：http://jsfiddle.net/uNZSX/

來源

2011-05-07 06:25:50 Marcin

將css規則應用到其他元素

回答

相關問題