Question

我有四个div个。当我悬停一个div时，其height和width会随着动画而增加。我想要的东西就像我悬停在一个div上的尺寸增加而其他3 div尺寸正在减少。

我完成了直到div悬停时增加大小我不明白如何一次更改所有其他div的大小。

这是我的HTML和CSS。

＆＃13;

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

＆＃13;

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

＆＃13;

任何人请帮助

Answer 1

不需要Javascript / jQuery，只能使用CSS。您可以利用:hover类CSS。

您可以使用容器的: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>

<强>更新

因为，当在两个元素之间悬停所有元素时，存在一些问题，最好使用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>

Answer 2

由于您已使用jQuery标记，因此您可以执行类似操作，例如在项目悬停时向所有兄弟元素添加类，然后您可以将css规则添加到该类以获得较小的视图

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 4

我认为这可以做得很多辛普勒。如果你将其中一个方格悬停，你也会将其悬停在容器上。你可以用它。在下面的示例中，我使用color和fontsize来保持示例不那么复杂：

＆＃13;

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

＆＃13;

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

＆＃13;

将鼠标悬停在一个div

4 个答案: