當其他元素被清除時，使默認元素更改

Question

發現這個很好的jsfiddle http://jsfiddle.net/4mE3b/4/，它近似於我的需要。我需要這個小提琴沒有提供的一個方面，我找不到答案。

我想第一個元素，在這種情況下，它是紅色的塊，就像一個默認的圖像，所以當頁面加載時，它顯示爲紅色。但是，當其他元素被盤旋時，我希望它改變它的狀態。

HTML

<div class="red blur-me"></div> 
<div class="blue blur-me"></div> 
<div class="green blur-me"></div> 
<div class="orange blur-me"></div> 
<div class="black blur-me"></div> 

的Javascript

blurredImages = $('.blur-me'); 
blurredImages.on("mouseenter", function() { 
$(this).addClass("blurred");  
}) 
blurredImages.on("mouseleave", function() { 
$(this).removeClass("blurred");  
}) 

CSS

.red, .blue, .green, .orange, .black { 

width: 80px; 
height: 80px; 
margin: 6px;} 

.red { 
background-color: red;} 

.red blur-me {background:green;} 

.blue { 
background-color: blue; 
opacity: 1;} 

.green { 
background-color: green; 
opacity: 1;} 

.orange { 
background-color: orange; 
opacity: 1;} 

.black { 
background-color: black; 
opacity: 1;} 

.blurred { 
opacity: 0.5;} 

任何幫助將是偉大的！

Answer 1

你應該把它們放在一個包裝的div和切換上的mouseenter它的類和mouselave這樣

HTML 
<div id="wrapper"> 
    <div class="red blur-me"></div> 
    <div class="blue blur-me"></div> 
    <div class="green blur-me"></div> 
    <div class="orange blur-me"></div> 
    <div class="black blur-me"></div> 
</div> 

jQuery 
$('.blur-me').hover(function(){ 
    var that = $(this); 
    $('#wrapper').removeClass(); 
    $('#wrapper').addClass(that.attr('class').split(' ')[0] + '-hovered'); 
}); 

這將增加的紅徘徊於上徘徊紅色包裝DIV類名，這樣，您可以徘徊時，每個元素響應，並相應地改變CSS，例如：

.red-hovered .red{ 
    opacity: .9; 
} 

我希望這是你問什麼