當鼠標懸停一個div時，其餘部分發生變化

Question

我想當我懸停'.post'div時，'.post'div的其餘部分發生變化，例如其背景。

我該怎麼做？

CSS：

.post { width: 25px; height: 25px; } 

HTML：

<div class="post"> ... </div> 
<div class="post"> ... </div> 
<div class="post"> ... </div> 
<div class="post"> ... </div> 

Answer 1

使用懸停功能和.not(this)

$('.post').hover(function() { 
    // .css can be anything you want it to be 
    $('.post').not(this).css({'color':'red'}); 
}, function() { // Revert back to default (optional) 
    $('.post').css({'color':'black'}); 
}); 

Demo

Answer 2

使用jQuery：

$(function(){ 
    $("div.post").mouseover(function(){ 
    $(this).siblings().css("background-color","red"); 
}); 
$("div.post").mouseout(function(){ 
    $(this).siblings().css("background-color","white"); 
}); 
});