How to create javascript function for hovering 3 or 4 element at a time

Question

I want to hover 3 item at a time. when i will put cursor one of them. It should hover other two item. please can help me anyone. i want to do this with javascript. I have make

Answer 1

1. use a mapping javascript object.

2. and use class 'like' selector to bind functions to elements which have class starting with ".box"

eg :

$(document).ready(function(){
    var mapping = { 'box1':'box4','box4':'box1' };

    $("[class^=box]").mouseover(function(){
       .........

    });

Answer 2

If you group your divs by parent divs, you can use the HTML structure to determine what to highlight. I don't know your exact usage model, but something like this:

<div class="boxgroup">
    <div class="box1 hover"></div>
    <div class="box2 hover"><a href="mylink" class="hov">Link</a></div>
</div>

<div class="boxgroup">
    <div class="box1 hover"></div>
    <div class="box2 hover"><a href="mylink" class="hov">Link</a></div>
</div>

And then in your jQuery:

$(document).on('mouseover', '.hover', function () {
    var boxgroup = $(this).closest('.boxgroup');
    boxgroup.find('.hover').addClass('hovercolor');
    boxgroup.find('.hov').css('color', '#0f0');
}).on('mouseout', '.hover', function () {
    var boxgroup = $(this).closest('.boxgroup');
    boxgroup.find('.hover').removeClass('hovercolor');
    boxgroup.find('.hov').css('color', '#000');
});

Here, I use .closest() to find what group the div is in, and then highlight all of the other .hover items in that group.

Example:

http://jsfiddle.net/jtbowden/HZtVP/3/

If you want your divs to not be physically grouped, there are other ways to do what you want.