При наведении изменения нескольких элементов

Question

Я хочу, чтобы несколько элементов меняли цвет при зависании. Я пытаюсь заставить его работать через Javascript, я не герой с этим.

В принципе, я хочу, чтобы навести либо черный div, либо белый div, чтобы он менял цвета (черный становится белым и наоборот).

Javascript:

$('#onethirdcolumn').hover(function(){ 
    $('#onethirdcolumn + .leesmeer').css({ 
     'color':'#fff', 
     'background-color':'#000000' 
    }); 
},function(){ 
    $('#onethirdcolumn + .leesmeer').css({ 
     'color':'#000000', 
     'background-color':'#fff' 
    }); 
}); 

jsfiddle

Answer 1

Вот такой FIDDLE

<div class="box w">TEXT</div> 
<div class="box b">TEXT</div> 
<div class="box w">TEXT</div> 
<div class="box b">TEXT</div> 
<div class="box w">TEXT</div> 
<div class="box b">TEXT</div> 


.box { 
    float: left; 
    width: 220px; 
    height: 220px; 
    padding: 10px; 
    border: 1px solid #ddd; 
    transition: all 0.3s linear; 
} 
.box.w { 
    background: white; 
    color: black; 
} 
.box.b { 
    background: black; 
    color: white; 
} 


$(function() { 
    $(document).on('mouseenter','.box', function() { 
    if($('.box').hasClass('w')) { 
     $('.box').toggleClass('b'); 
    } 
    if($('.box').hasClass('b')) { 
     $('.box').toggleClass('w'); 
    } 
    }); 
}); 

Answer 2

Вам не нужно использовать JavaScript на всех для достижения этого эффекта.

Предполагая, что HTML, как:

<div class="wrapper"> 
    <div class="container black"></div> 
    <div class="container white"></div> 
    <div class="container black"></div> 
    <div class="container white"></div> 
</div> 

Вы можете добиться эффекта парения со следующим в CSS:

.container { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    -moz-transition: all 1s; /* Why? Because they're purdy... */ 
    -webkit-transition: all 1s; 
    transition: all 1s; 
} 
.black { 
    background: #000; 
    color: #fff; /* Yay! Contrast! */ 
} 
.white { 
    background: #fff; 
    color: #000; /* it DOES matter if you're black or white (if you're text, that is) */ 
} 
.black:hover { 
    background: #fff; 
    color: #000; /* if you've got text of the opposite color inside */ 
} 
.white:hover { 
    background: #000; 
    color: #fff; /* and again... */ 
} 

И если вы хотите, чтобы они все изменения:

.wrapper:hover .black { /* Bam! Spice weasel */ 
    background: #fff; 
    color: #000; 
} 
.wrapper:hover .white { 
    background: #000; 
    color: #fff; 
} 

Вот Fiddle