我一直在想办法解决这个问题,但没有成功。
下面是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/
3条答案
按热度按时间qaxu7uf21#
将class设置为
scale-up
和scale-down
,并在悬停时将scale-up class添加到悬停的元素,并将scale-down class添加到其兄弟元素。z18hc3ub2#
尝试使用HTML/CSS:
HTML
字符串
CSS
型
jsfiddle
编辑:添加缓动
ssm49v7z3#
我知道我迟到了,但是新的
:has
关系伪类与:not
结合使用非常适合字符串
您可以更具体地使用选择器,但老实说,您可以向容器中添加任意数量的完全不同的项,并避免显式地选择它们,以便对它们进行相同的处理
在撰写本文时,大多数主流浏览器的最新版本都支持
:has
,但全球支持率仅为90%,因此我要么使用回退,要么避免使用它,直到它在全球范围内被采用