当悬停在一个div上时，更改其他div的类

Question

我有四个 div。当我悬停在其中一个 div 上时，它的 height 和 width 会以动画方式增加。我希望实现这样一种效果：当我悬停在一个 div 上时，其大小增加，而其他三个 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>

请问有人可以帮我吗？

- The Princess

Answer 1

不需要使用Javascript/jQuery，你可以仅使用CSS实现。你可以利用CSS中的:hover类。

1. 你可以使用容器的:hover来动画（减小）元素的尺寸。例如：.container>div:hover ~ div {可以设置所有其他未被悬停的<div>元素的样式。
2. 你可以动画（增加）悬停的元素的尺寸。

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

更新

因为在两个元素之间悬停时会出现一些问题，所有元素都会被收缩，最好使用Javascript。不需要使用Javascript/jQuery，我收回我的话。

您可以使用siblings()来选择当前元素的所有兄弟元素。

$('.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>

- Tushar

---

它不适用于先前的元素 - 如果您悬停在最后一个元素上呢？ - Arun P Johny

现在，在悬停任何元素之前，所有元素都会变小...仅使用CSS的适当解决方案将会很困难。 - Arun P Johny

Answer 2

由于您已经使用了jQuery，您可以在悬停项目时向所有兄弟元素添加类，然后可以添加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>

- Arun P Johny

---

但是我们能否在没有 jQuery 的情况下完成它呢？ - The Princess

@ThePrincess 我觉得不行... 因为没有所有兄弟选择器... 正如你所见，其他答案并不能适用于所有元素。 - Arun P Johny

Answer 3

您可以使用 CSS 选择器 ~，但这只适用于下一个兄弟元素，而不适用于前一个兄弟元素。选择前一个兄弟元素是不可能的。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);
}

- Chanckjh

---

如果您将鼠标悬停在最后一个元素上会怎样？ - Arun P Johny

Answer 4

我认为这个可以更简单地完成。如果您悬停在其中一个方块上，也会悬停在容器上。您可以利用这一点。在下面的例子中，我使用颜色和字体大小来使示例变得不那么复杂：

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

- Martijn