当鼠标悬停一个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"); 
}); 
});