更新

Question

我有一个由100个字段div组成的地图，我想在悬停时更改字段的box-shadow，所以我有CSS代码：

.field:hover {
    box-shadow: inset 0px 0px 100px 0px rgba(255,0,0,0.3);
}

我注意到，当字段div为空（< div class="field" >< /div >）时，div box-shadow会在悬停时立即发生变化，一切运行顺畅。但是，如果我在该div中放置任何内容（例如< div class"field" >some content< /div >），那么在我将光标放在它上面的那一刻和它获得盒子阴影的那一刻之间会有一个明显的延迟。

我注意到的另一个有趣的事情是，即使我在div（< div class="field" style="background-image: url(image.jpg)" >< /div >）上设置背景图像，如果它是空的，它仍然比没有背景图像的div运行得更快，但内部有一些内容。

基本上我的问题是 - 有什么方法可以在内部有一些内容的div上实现空div（或至少接近那个）的悬停状态变化速度？

@edit：

所以我无法在小提琴上真正重现这种“无内容与内容”之间的差异，但我发现只有在默认情况下字段有一些框阴影时才会出现问题。我可以告诉你：https://jsfiddle.net/azp0w668/2/

在我的项目中，只有当div中有内容时才出现问题（否则它会顺利运行），但是这里似乎甚至在div为空时出现，但只有当它有盒子阴影时（我创建了一个切换）按钮，这样你就可以看到差异）

Answer 1

根据内部是否有内容，悬停pseudoClass的响应速度没有任何变化。

但是，需要检查一些常见的事情：

确保您没有在某处应用过渡属性
您的内容可能会以某种方式阻止悬停击中您的容器。您可以通过在内容

pointer-events:none

尝试在容器底部添加填充并悬停该区域。应该没有延迟，你可以确定它与内容本身有关，而不是容器。

更新

我和你的小提琴玩了一会儿，实际上这似乎是浏览器在悬停元素改变时重绘太多东西或太多次的问题。

你可以通过从中间的4-6个方框中移除阴影来测试你的小提琴，你会发现延迟发生在没有阴影的方框上。反转阴影，你会看到4-6个有阴影的盒子没有延迟。

所以问题是页面上的单个阴影太多了，修复就是减少阴影的数量。

我不确定您的规格的细节，但是如果可以在父或重叠元素上放置一个阴影，可以同时为多个元素使用单个阴影，而不是单独为每个阴影应用阴影，这会有所帮助。或者也许您可以使用渐变或背景图像来创建阴影效果，而无需使用box-shadow属性。

更新2

使用border-image道具发现了一些可能有用的黑客攻击： https://stackoverflow.com/a/1249752/1120103

悬停时的CSS更改在非空div上

1 个答案:

更新

更新2