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

vvppvyoh 于 9个月前发布在 jQuery

关注(0)|答案(3)|浏览(125)

我一直在想办法解决这个问题，但没有成功。
下面是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. x1c 0d1x持开放态度。
我还附上了一个jsfiddle，这就是为什么在容器上使用hover不起作用：https://jsfiddle.net/e5vjL7k7/

jquery

来源：https://stackoverflow.com/questions/44635252/how-to-scale-up-a-div-on-hover-and-scale-down-all-other-divs

3条答案

按热度按时间

qaxu7uf21#

将class设置为scale-up和scale-down，并在悬停时将scale-up class添加到悬停的元素，并将scale-down 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>

赞(0）回复(0）举报 9个月前

z18hc3ub2#

尝试使用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
编辑：添加缓动

赞(0）回复(0）举报 8个月前

ssm49v7z3#

我知道我迟到了，但是新的: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%，因此我要么使用回退，要么避免使用它，直到它在全球范围内被采用

赞(0）回复(0）举报 8个月前

我来回答

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

3条答案

相关问题

热门标签

最新问答