jquery - 悬停时的 CSS 更改在非空 div 上显得太晚了

Question

我有一个由 100 个字段 div 组成的 map ，我想在悬停时更改字段的框阴影，所以我的 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(或至少接近那个)的悬停状态变化速度？

@编辑:

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

在我的元素中，只有当 div 中有内容时才会出现问题(否则它会顺利运行)，但在这里即使 div 为空时它似乎也会出现，但前提是它有 box-shadow(我创建了一个切换按钮，以便您可以看到差异)

Answer 1

基于内部是否有内容，悬停伪类的响应速度没有变化。

但是，一些常见的检查事项:

• 确保你没有在某处应用过渡属性
• 您的内容可能以某种方式阻止悬停点击您的容器。您可以通过在内部内容上设置 pointer-events:none 来测试这一点

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

更新

我玩了一会儿你的 fiddle ，实际上这似乎是浏览器在悬停元素发生变化时重新绘制太多东西或太多次的问题。

您可以通过移除中间 4-6 个框的阴影在您的 fiddle 中对此进行测试，您会注意到延迟也发生在没有阴影的框上。反转阴影，你会看到有阴影的 4-6 个框没有延迟。

所以问题是页面上同时有太多单独的阴影，解决方法是减少阴影的数量。

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

更新 2

使用 border-image 属性发现了一些可能有用的 hack: https://stackoverflow.com/a/1249752/1120103