如何在悬停时放大 div 并缩小所有其他 div

Question

我一直在努力解决这个问题，但没有成功。

下面是 6 个循环 div。当用户将鼠标悬停在其中一个上时，我希望悬停的 div 扩大一点（放大），所有其他 div 缩小一点（缩小）。

我测试了以下内容：

#container div:hover {
  transform: scale(1.1);
}

#container div:not(:hover) {
  transform: scale(0.9);
}

但是，这会使所有 div 缩放为 0.9（我希望它们仅在其他 div 之一悬停时缩小。

我还测试了以下内容：

#container div:hover {
  transform: scale(1.1);
}

#container:hover div:not(:hover) {
  transform: scale(0.9);
}

但是，由于这会在悬停整个 container/parent 元素时缩小所有 div，而不是 individual div，因此此解决方案不会也不行。

基本上，当一个圆圈（并且只有那个圆圈）悬停时，我希望它扩大而所有其他圆圈缩小。

我非常喜欢纯粹的 CSS 解决方案，但我对 jQuery 持开放态度。

我还附上了一个 jsfiddle，这就是为什么在容器上使用悬停不起作用的原因：https://jsfiddle.net/e5vjL7k7/

Answer 1

将 class 变为 scale-up 和 scale-down 并在悬停时将放大 class 添加到悬停和缩小 class 的元素给它的兄弟姐妹。

$("li").hover(function() {
  $(this).toggleClass('scale-up').siblings().toggleClass('scale-down')
})

ul {
  list-style: none;
}
li {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  transition: all 0.3s ease-in;
  border-radius: 50%;
  margin: 10px;
}
.scale-up {
  transform: scale(1.2);
}
.scale-down {
  transform: scale(0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 2

尝试仅使用 HTML/CSS：

HTML

<div class="container">
    <div class="target"></div>
    <div class="target"></div>
    <div class="target"></div>
</div>

CSS

.target {
    width: 300px;
    height: 100px;
    border: 1px solid #000;
    margin: 10px;
}
.container {
    float: left;
}
.container:hover .target {
    transform: scale(0.9);
    transition-timing-function: ease-in;
    transition: 0.2s;
}
.container .target:hover {
    transform: scale(1.1);
    transition-timing-function: ease-in;
    transition: 0.2s;
}

jsfiddle

编辑：添加缓动

如何在悬停时放大 div 并缩小所有其他 div

How to Scale Up a div on hover and Scale Down all other divs

css

jquery

hover

css-selectors

jquery-selectors