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

Question

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

下面是 6 个圆形 div。当用户将鼠标悬停在其中一个 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

编辑：添加缓动

Answer 3

我知道我参加聚会已经很晚了，但是新的

:has

关系伪类与

:not

结合起来非常适合此目的

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.target {
    width: 100px;
    aspect-ratio: 1;
    border: 1px solid #000;
    border-radius: 50%;
    transition-timing-function: ease;
    transition: 0.2s;
}

.container:has(> *:hover) > *:not(:hover) {
    transform: scale(0.9);
}

.container > *:hover {
    transform: scale(1.1);
}

您可以更具体地选择您的选择器，但老实说，您可以将任意数量的完全不同的项目添加到容器中，并避免显式选择它们以将它们视为相同的

在撰写本文时，大多数主要浏览器的最新版本都支持

:has

，但全球支持率略低于 90%，因此我要么使用后备方案，要么避免使用它，直到它被全球采用为止