Change class of other div when hovering on one div

Question

I have four divs. When I hover one div, its height and width increase with animation. I want something like when I hover on one div its size increases and other 3 div sizes are decreasing.

I am done till increase size of div on hover I don't understand how to change size of all other divs at one time.

Here is my HTML and CSS.

.style_prevu_kit {
  display: inline-block;
  border: 0;
  width: 196px;
  height: 210px;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
  background-color: #00a096;
}
.style_prevu_kit:hover {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}

<div align="center">
  <div style="width:1000px;">
    <div id="s1" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s3" class="style_prevu_kit"></div>
  </div>
</div>

anyone please helpme

Answer 1

No need of Javascript/jQuery, you can do this using CSS only. You can take advantage of :hover class of CSS.

1. You can use the container's :hover to animate(decrease) the dimension of the elements. Ex: .container>div:hover ~ div { to set the styles of all the other <div> elements than the hovered element
2. You can animate(increase) the dimensions of the element that is hovered

.container {
  width: 1000px;
}
.container:hover div:not(:hover) {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(.5);
}
.style_prevu_kit {
  display: inline-block;
  border: 0;
  width: 196px;
  height: 210px;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
  background-color: #00a096;
}
.container .style_prevu_kit:hover {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}

<div align="center">
  <div class="container">
    <div id="s1" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s3" class="style_prevu_kit"></div>
  </div>
</div>

Update

Because, there are some issues when hovering between the two elements all the elements are contracted, it's better to use Javascript. No need of Javascript/jQuery, I'm taking back my words.

You can use siblings() to select all the sibling elements of the current elements.

$('.container .style_prevu_kit').hover(function() {
  $(this).siblings('.style_prevu_kit').addClass('animate');
}, function() {
  $(this).siblings('.style_prevu_kit').removeClass('animate');
});

.container {
  width: 1000px;
}
div.animate {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(.5);
}
.style_prevu_kit {
  display: inline-block;
  border: 0;
  width: 196px;
  height: 210px;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
  background-color: #00a096;
}
.container .style_prevu_kit:hover {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div align="center">
  <div class="container">
    <div id="s1" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s3" class="style_prevu_kit"></div>
  </div>
</div>

Answer 2

Since you have tagged with jQuery, you can do something like add a class to all the sibling elements when a item is hovered, then you can add css rules to that class to have a smaller view

jQuery(function($) {
  $('.style_prevu_kit').hover(function(e) {
    $(this).siblings().toggleClass('small', e.type == 'mouseenter')
  })
})

.style_prevu_kit {
  display: inline-block;
  border: 0;
  width: 196px;
  height: 210px;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
  background-color: #00a096;
}
.style_prevu_kit:hover {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}
.style_prevu_kit.small {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div align="center">
  <div style="width:1000px;">
    <div id="s1" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s3" class="style_prevu_kit"></div>
  </div>
</div>

Answer 3

You could use css selector ~ but this only works for the next siblings and not the previous ones. Selecting previous siblings is not possible. http://jsfiddle.net/q041cwd8/

.style_prevu_kit:hover ~.style_prevu_kit {
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(0.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(0.5);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(0.5);
    transition: all 200ms ease-in;
    transform: scale(0.5);
}

Answer 4

I think this can be done a lot simpeler. If you hover one of the squares, you're also hovering the container. You can use that. In the example below I use color and fontsize to keep the example a bit less complicated:

/* Default state */
#container .style_prevu_kit{
    opacity: 0.75;
    background: orange;
    display: inline-block;
    width: 40%;
    height: 50px;
  vertical-align: top;
    transition: opacity 0.5s, background 0.5s, font-size 0.5s;
}
/* The other not selected elements */
#container:hover .style_prevu_kit{
   opacity: 0.5;
    background: blue;
}
/* The currect selected element */
#container .style_prevu_kit:hover{
   opacity: 1.0;
   background: green;
  font-size: 2em;
}

<div align="center">
  <div id="container" style="width:100%;">
    <div id="s1" class="style_prevu_kit">s1</div>
    <div id="s2" class="style_prevu_kit">s2</div>
    <div id="s2" class="style_prevu_kit">s3</div>
    <div id="s3" class="style_prevu_kit">s4</div>
  </div>
</div>