Подтвердить что ты не робот

Измените класс другого div при зависании на одном div

У меня есть четыре div s. Когда я нахожу один div, его height и width увеличиваются с анимацией. Я хочу что-то вроде, когда я наводил на один div его размер, и уменьшаются размеры 3 div.

Я делаю до увеличения размера div при зависании Я не понимаю, как изменить размер всех остальных div за один раз.

Вот мой HTML и 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>
4b9b3361

ОТВЕТЫ

Ответ 1

Не нужно Javascript/jQuery, вы можете сделать это, используя только CSS. Вы можете использовать класс CSS :hover.

  • Вы можете использовать контейнер :hover для анимации (уменьшения) размера элементов. Пример: .container>div:hover ~ div { для установки стилей всех остальных элементов <div>, чем зависающий элемент
  • Вы можете анимировать (увеличивать) размеры элемента, зависающего

.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>

Ответ 2

Поскольку вы отметили jQuery, вы можете сделать что-то вроде добавления класса во все элементы sibling, когда элемент зависает, тогда вы можете добавить правила CSS для этого класса, чтобы иметь меньший вид

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>

Ответ 3

Вы можете использовать css selector ~, но это работает только для следующих братьев и сестер, а не для предыдущих. Выбор предыдущих братьев и сестер невозможен. 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);
}

Ответ 4

Я думаю, что это можно сделать очень симпалером. Если вы наведете один из квадратов, вы также наведете контейнер. Вы можете использовать это. В приведенном ниже примере я использую color и fontsize, чтобы этот пример был немного менее сложным:

/* 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>