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 a model but it is not good. i want to use with function so i can use this again and again. please help me.

```
<!DOCTYPE html>
<html>
<head>

  <script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
.boxes {
    float: left;
    display: inline;
    width:150px;
    height:100px
}
.box1 {
    width:50px;
    padding:10px;
    border:1px solid gray;
    margin:0px;
    height: 20px;
}

.box4 {
    display: inline-block;
    width:150px;
    padding:10px;
    border:1px solid gray;
    height: 100px;
}

</style>
<script>
$(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');

    });
       $('.box4').mouseover(function(){
        $('.box4').css('background-color', '#F7FE2E');
        $('.box1').css('background-color', '#F7FE2E');
        $('.hov').css('color', '#0f0');

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

    });

});

</script>
</head>

<div class="boxes">
    <div class="box1">Box 1</div>

</div>
<div class="box4"><a href="#" class="hov">box4</a> </div>
<br/>
<div class="boxes">
    <div class="box1">Box 1</div>

</div>
<div class="box4"><a href="#" class="hov">box4</a> </div>

</body>
</html>

```