如何在悬停时放大 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);
}

但是，由于当整个容器/父元素悬停时，这会缩小所有 div，而不是单个 div，所以这个解决方案也不起作用。

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

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

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

Answer 1

为scale-up 和scale-down 创建类并在悬停时为悬停的元素添加放大类，为其兄弟元素添加缩小类。

$("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

编辑：添加缓动