我一直在尝试解决这个问题,但没有成功。
下面是 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/
为
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>
仅使用 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;
}
编辑:添加缓动
我知道我参加聚会已经很晚了,但是新的
: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%,因此我要么使用后备方案,要么避免使用它,直到它被全球采用为止