change multiple div background color when on hover using jquery

Question

I have 4 blue div boxes in a tile like structure. I would like to change the color of the other 3 when the mouse hovers over the just one of boxes using jquery. This block of code does not seem to do the job. any help would be much appreciated!

<div class="box" style=" height: 150px; width: 150px; border:5px solid black"></div>
<div class="box" style="height: 150px; width: 150px; border:5px solid black"></div>
<div class="box" style="height: 150px; width: 150px; border:5px solid black"></div>
<div class="box" style="height: 150px; width: 150px; border:5px solid black"></div>

$(document).ready((function () {
    $(".box1").mouseover(function () {
        $(".box2").css("background-color", "red");
        $(".box3").css("background-color", "green");
        $(".box4").css("background-color", "orange");
    });
});

Answer 1

You can do this with CSS General Sibling Selector ~ too. Here is an example :

 .box { display: inline-block; width: 70px; height: 70px; border: 1px solid; } .box1:hover ~ .box2 { background: red; } .box1:hover ~ .box3 { background: green; } .box1:hover ~ .box4 { background: blue; } 

 <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> <div class="box box3">Box 3</div> <div class="box box4">Box 4</div> 

Answer 2

Try this

$(document).ready(function () {
    $(".box1").mouseover(function () {
        $(".box2").css("background-color", "red");
        $(".box3").css("background-color", "green");
        $(".box4").css("background-color", "orange");
    });
});

Answer 3

i did this fast for you, hope it is what you need CodePen

$(".box").hover(function () {
            $(".box").css("background", "red");
            $(".box1").css("background", "green");
    },function(){
            $(".box, .box1").css("background", "#262626");
});

Answer 4

Also try this: you can use .hover and remove the double braces in ready((function () {

$(document).ready(function () {
    $(".box1").hover(function () {
        $(".box2").css("background-color", "red");
        $(".box3").css("background-color", "green");
        $(".box4").css("background-color", "orange");
    });
});

Further info, related here .

Answer 5

You could use single .box class on each div, set color in data attribute of each div and grab it on hover

HTML:

<div data-color="grey" class="box"></div>
<div data-color="red" class="box"></div>
<div data-color="green" class="box"></div>
<div data-color="orange" class="box"></div>

jQuery:

$(document).ready(function () {
    $(".box").hover(function () {
        // change hovered div background to yellow:
        $(this).css("background-color", 'yellow');
        // loop through the rest of the divs with the same class:
        $(".box").not(this).each(function(){
            // change their background color according to their 'data-color' attribute:
            $(this).css("background-color", $(this).data('color'));
        });
       // set hover out method:
    }, function(){
        // change each 'box' background color to default:
        $(".box").css("background-color", '');
    });
});

DEMO

---

Or, if you need only these 3 colors ( red , green and orange ) to be applied to the other boxes, you could use something like this:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

$(".box").hover(function () {
    $(this).css("background-color", 'yellow');
    $(".box").not(this).each(function(i){
        $(this).css("background-color", (['red','green','orange'])[i]);
    });
}, function(){
    $(".box").css("background-color", '');
});

DEMO

Answer 6

I have created this piece of code which I guess will help you,

HTML

<div class="box box1" id="box1"></div>
<div class="box box2" id="box2"></div>
<div class="box box3" id="box3"></div>
<div class="box box4" id="box4"></div>

CSS

.box {
  width : 100px;
  height : 100px;
  border : 1px solid gray;
}
.yellow {
  background : yellow;
}
.red {
  background : red;
}
.green {
  background : green;
}
.orange {
  background : orange;
}

JQuery

$(document).ready(function () {

    var colorArray = ['red', 'green', 'orange'];

    function assignRandomBackgroundToElement(element, color) {
         element.addClass(color);
    }

    function assignRandomBackgroundToRemainingElements(remainingBoxIndexes, elementArray) {
      remainingBoxIndexes.forEach(function(ele, index) {
         assignRandomBackgroundToElement($(elementArray[ele]), colorArray[index]);
      });
    }
    $(".box").mouseover(function () {
        var element = $(this);
        element.addClass('yellow');
        var totalBoxes = $(".box").length;
        var currentIndex = 0;
        var remainingBoxIndexes = [];
        $(".box").each(function(index, ele){
          if($(ele).attr('id')===element.attr('id')) {
            currentIndex = index;
          } else {
            remainingBoxIndexes.push(index);
          }
        });
        assignRandomBackgroundToRemainingElements(remainingBoxIndexes, $(".box"));

    });

  $(".box").mouseout(function () {
        $(".box").removeClass('red green orange yellow');     
  });
});