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");
    });
});

You have a couple of typos in your jQuery. Check your console for the errors. Working example jsfiddle.net/j08691/xk3ke75e — j08691
– j08691, Commented Mar 6, 2015 at 16:08
how are you planning to assign colors to each remaining boxes, same colour, or random different colors ? and also, whther u want hover on only one box i.e box1 — Nielarshi
– Nielarshi, Commented Mar 6, 2015 at 16:08
Your code is correct, you have one typo just after ready method opens. You have 2 brackets there. — Nielarshi
– Nielarshi, Commented Mar 6, 2015 at 16:12
@j08691 Nicely done, I have the feeling that the op may have also desired to have this effect reversed on mouseout, so i have an updated fiddle here: jsfiddle.net/nvrtfsod — Anthony Rivas
– Anthony Rivas, Commented Mar 6, 2015 at 16:17

Anupam Basak · Accepted Answer · 2015-03-06 16:39:28Z

3

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>

edited Mar 6, 2015 at 16:39

answered Mar 6, 2015 at 16:22

Anupam Basak

1,52311 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

D00ble Over a year ago

but i would like to get it done using jquery and not css

Anupam Basak Over a year ago

Ok. This is just an alternate way to do it. It seems that you have already got answers with jQuery.

Artur Filipiak · Accepted Answer · 2015-03-06 18:00:15Z

0

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

edited Mar 6, 2015 at 18:00

answered Mar 6, 2015 at 17:27

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

7 Comments

D00ble Over a year ago

I appreciate your help, i tried both ways but there is no change in the color of any of the div boxes. my html for each div box looks like this-----------------------------------------------------------------------------------<div class="box" style="height: 150px; width: 150px; border:5px solid black"></div>

Artur Filipiak Over a year ago

@D00ble , Have you included jQuery library in the page? It does work Here

D00ble Over a year ago

yes i have it linked to my html page copied and pasted your code exactly as is, saved and refreshed the browser.... no effect

Artur Filipiak Over a year ago

@D00ble , then the problem is somewhere else. Difficult to say where it could be without seeing the rest of the code and HTML.

D00ble Over a year ago

finally got it. I didn't link my jquery library first in my header tag. Apparently it has to be the first linked file. once again i appreciate all your help!

|

soundhiraraj · Accepted Answer · 2015-03-06 16:10:21Z

0

Try this

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

answered Mar 6, 2015 at 16:10

soundhiraraj

3231 silver badge9 bronze badges

2 Comments

j08691 Over a year ago

Please explain what you did.

soundhiraraj Over a year ago

$(document).ready((function (){ instead of this i put $(document).ready(function (){

ZetCoby · Accepted Answer · 2015-03-06 16:15:09Z

0

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");
});

answered Mar 6, 2015 at 16:15

ZetCoby

6381 gold badge6 silver badges14 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:43:57Z

0

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.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Mar 6, 2015 at 16:18

Herman Nz

2,2613 gold badges23 silver badges38 bronze badges

Comments

Nielarshi · Accepted Answer · 2015-03-06 18:16:28Z

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');     
  });
});

Collectives™ on Stack Overflow

change multiple div background color when on hover using jquery

6 Answers 6

2 Comments

7 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

7 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related