在懸停時突出顯示多個元素

Question

在懸停一個元素時突出顯示多個元素是一個常見問題。 Stack about this issue有幾個類似的問題，但它通常只處理一層信息。

例如：當我點擊此框時，我想突出顯示另一個框。

我想將此功能添加到三層信息，並且它可以互換使用。

See the fiddle here.

你可以看到它是工作，但我想知道是否有辦法做到這一點更好。例如，當我每層有大約12個選項時是可以的，但如果是50或100呢？有沒有一種方法來簡化它，所以在每個層中添加多個項目而不手動添加相對於ID的每個類名稱會更容易？

似乎我可以通過將一個變量傳遞給一個函數來打開顯式類名，但我不知道如何獲取所有類型的懸停對象的類名，並檢查這些對類在其他層的名字。或者，如果你知道有一個神奇的插件嗎？

Answer 1

這是關於使用jQuery實現它的最佳方法。您也可以使用CSS和類應用於父元素的類似效果。

例如：

<div> 
    <div class="bob">This is Bob.</div> 
</div> 

然後添加一個類的父元素：

<div class="show-bob"> 
    <div class="bob">This is Bob.</div> 
</div> 

當然，CSS是這裏的關鍵：

.bob { opacity: 0.75 } 
.show-bob .bob { opacity: 1 } 

當然，你需要在那裏添加一些CSS動畫屬性來實現真正的功能比較，但你會得到這個主意。