如何定位除了div懸停的同一類的所有div？

我有一系列div都具有相同的類（如果它使這更容易，它們不必具有相同的類）。理想情況下，我想要的是，當用戶將鼠標懸停在其中一個div上時，其他div（每個div中都有一個背景圖像）全部變爲灰色，以將焦點放在當前懸停的烘焙div上。如果這是div被徘徊，改變了我會很好，但我真的不知道如何解決這個問題。某種兄弟姐妹選擇器？如果解決方案不向後兼容，我寧願只使用css而且很高興。如何定位除了div懸停的同一類的所有div？

這是我的代碼到目前爲止。提前致謝！

.box:hover (SELECT ALL OTHER .BOX) { 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%); 
-o-filter: grayscale(100%); 
-ms-filter: grayscale(100%); 
filter: grayscale(100%); }

編輯：我知道我可以給每個箱子一個不同的類，然後說，當盒子1懸停，箱2,3,4等去灰色，這樣做對每個..但這似乎就像很多簡單的代碼一樣。

來源

2012-09-21 nick501414

如果你不反對JavaScript和[jQuery的]（ http://docs.jquery.com/），它可以用來將一個事件綁定到一組元素（通過id，通過css類，任何其他選擇器），例如懸停d使您能夠提供回調，並使用JavaScript以您所尋求的方式操作DOM中的任何元素。 – Jeremy

閱讀[6.6.1。動態僞類]（http://www.w3.org/TR/css3-selectors/#class-html） –

乾杯，認爲我將不得不用javascript來做到這一點。 – nick501414

下面的解決方案僅適用於元素相鄰的情況，例如導航欄。也許這不是你的情況，但它可以幫助別人。必須說它是跨瀏覽器的CSS2。

包裝你<div>一個容器內：

<div class="container"> 
    <div class="target"></div> 
    <div class="target"></div> 
    <div class="target"></div> 
    <div class="target"></div> 
    <div class="target"></div> 
</div>

並用它來控制:hover

.target { 
    background-color: #444; 
} 
.container { 
    float: left; 
} 
.container:hover .target { 
    background: #bbb; 
} 
.container .target:hover { 
    background: #444; 
}

它的工作here

來源

2012-09-21 15:48:16 albertedevigo

這隻適用於目標元素之間沒有邊距的情況。否則將指針放在容器上也會改變目標元素。 – BoltClock

是的，正如我所說，這隻適用於相鄰的元素。 – albertedevigo

這真是太好了，謝謝你的工作。幸運的是，他們相鄰:) – nick501414

使用:notCSS3選擇

div.box:not(:hover) { ... }

如果這是你的意思...

來源

2012-09-21 15:27:07

沒有一個兄弟組合子，讓您選擇其他元素的所有其他的兄弟姐妹。原子上你可以用.box:not(:hover)來表示，如其他答案所示，但是你不能選擇所有其他.box:not(:hover)元素相對於 a .box:hover元素在同一個父元素中。

與兄弟組合程序+和~你能做到這一點途中，但他們只能看着下面的元素兄弟姐妹：

.box:hover ~ .box { 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    filter: grayscale(100%); 
}

這意味着，如果你將鼠標懸停在第二個框，則只有第3和第4盒子會變灰，但不是第一個。

沒有辦法用CSS選擇前面的兄弟姐妹。目前，實現您想要的唯一方法是在懸停特定框時使用JavaScript在其他框上切換樣式。

來源

2012-09-21 15:29:18 BoltClock

感謝您的回答，非常有幫助。看起來像css來解決這個問題很近（用你的代碼），但我想我將不得不與JavaScript一起去。 – nick501414

如何定位除了div懸停的同一類的所有div？

回答

相關問題