如何在懸停時顯示'兄弟'的CSS，但不顯示懸停的項目？

Question

我有5位文本，我希望當你將鼠標懸停在其中一個文本上時，css波紋管將應用於除了你正在徘徊的文本之外的所有文本位。

你可以使用jquery和.siblings（）屬性來做這個嗎？

HTML：

<table width="1138" height="38" border="0" class="Home111"> 
<tr> 
<th width="146" scope="col"> <div class="top" id="one"><a href="T-Shirts.html"class="blur out">T-SHIRTS</a></div> 
</th> 
<th width="146" scope="col"> <div class="top" id="two"><a href="Bits &amp; Bobs.html"class="blur out">BLOG</a></div> 
</th> 
<th width="146" scope="col"> <div class="top" id="three"><a href="Music.html"class="blur out">MUSIC</a></div> 
</th> 
<th width="146" scope="col"> <div class="top" id="four"><a href="Contact.html"class="blur out">CONTACT</a></div> 
</th> 
<th width="146" height="38" scope="col"> <div class="top" id="five"><a href="About.html"class="blur out"> ABOUT</a></div> 
</th> 

的CSS：

a.blur 
{ 
text-decoration: none; 
color: #339; 
} 

a.blur:hover, a.blur:focus 
{ 
text-decoration: underline; 
color: #933; 
} 

.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus 
{ 
text-decoration: none; 
color: rgba(0,0,0,0); 
outline: 0 none; 
-webkit-transition: 400ms ease 100ms; 
-moz-transition: 400ms ease 100ms; 
transition: 400ms ease 100ms; 
} 

.textshadow a.blur, 
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus 
{ 
text-shadow: 0 0 4px #339; 
} 

.textshadow a.blur.out, 
.textshadow a.blur:hover, .textshadow a.blur:focus 
{ 
text-shadow: 0 0 0 #339; 
} 

Answer 1

不能是沒有具體的HTML，不知道哪些規則都應該被應用到兄弟姐妹

$('a.blur').hover(function(){ 
    $(this).siblings().addClass('someclass'); 
}, function(){ 
    $(this).siblings().removeClass('someclass'); 
}); 

Answer 2

要做到這一點，你不能簡單地使用.siblings()，因爲他們不是嚴格的兄弟姐妹，更像是非常遙遠的表親:)所以爲了加快速度，你應該保留一個變量中所有項目的列表，然後使用.not(this)來排除目前的項目在hover()回調。

var items = $('.Home111 a'); // all anchors inside table with class Home111 

items.hover(function() { 
    var others = items.not(this); 
    // others = the siblings of current item 
}, function() { 
    var others = items.not(this); 
    // others = the siblings of current item 
});