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

Posted 2023-03-05

【中文标题】如何在悬停时放大 div 并缩小所有其他 div

【英文标题】：How to Scale Up a div on hover and Scale Down all other divs

【发布时间】：2017-11-21 22:43:13

【问题描述】：

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

以下是 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/

【参考方案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>

【讨论】：

感谢您的回复，但我不能使用 display: flex，我需要将我的 div 设置为“inline-block”并居中（请参阅我附加的图片）。

【参考方案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 是圆形的，所以这不起作用（见我的图片）

嗯，它必须坐在什么东西里面，是吗？这只是实际代码如何工作的 jsfiddle 示例。没有理由这不应该工作吗？无论容器和 div 形状的外形尺寸如何？另外，您的示例代码中有容器吗？哈哈。你从来没有说过你不想要一个容器。

我有一个容器，但是在这里，您注意到它们在您将鼠标悬停在 div 上之前是如何缩小的吗？在您的示例中很难看到，因为它们是矩形，但在我的情况下，在容器上应用悬停会使 div 缩小，即使没有悬停：jsfiddle.net/e5vjL7k7

好的，我知道你的问题是什么。

很遗憾，我使用了 Nenad Vracar 的解决方案