for hovering 3 items at a time with javascript using same class
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/14579369/how-to-create-javascript-function-for-hovering-3-or-4-element-at-a-time">How to create javascript function for hovering 3 or 4 element at a time</a>  </p>
</blockquote>



<p>I want to hover 3 element at a time. when i will put cursor one of them. It should hover other two item. i want to do this with javascript.
please see this:</p>

<p><a href="http://jsfiddle.net/Taslimkhan/wTcTU/14/" rel="nofollow">http://jsfiddle.net/Taslimkhan/wTcTU/14/</a></p>

<p>I have used class three times in my html document. when i hover on 1st box set it show all box hover. 
but i need: 
when i will hover box 1 it should show only A box, and when i will hover A box it should show only box1,</p>

<p>when i will hover box 2 it should show only B box, and when i will hover B box it should show only box2,</p>

<p>same behaviour should do for third set of box. </p>

<p>I cant use same class two times. but I want to use same class. again and again. but how can i do them? please help me.</p>

<p>There are code i have used:</p>

<pre><code>$(document).ready(function(){
// box 1
$('.box1').mouseover(function(){
    $('.box1').css('background-color', '#F7FE2E');
    $('.box4').css('background-color', '#F7FE2E');
    $('.hov').css('color', '#0f0');

});
$('.box1').mouseout(function(){
    $('.box1').css('background-color', '#FFF');
    $('.box4').css('background-color', '#FFF');
    $('.hov').css('color', '#fff');

});
</code></pre>
