如何强制 linux 上的 chrome 重新计算/重新渲染 ":hover" 样式？

Posted 2023-03-06

【中文标题】如何强制 linux 上的 chrome 重新计算/重新渲染 ":hover" 样式？

【英文标题】：How can you force chrome on linux to recalculate/re-render ":hover" styling?

【发布时间】：2014-04-29 04:44:11

【问题描述】：

我有一种情况，其中 javascript 代码导致 DOM/样式更改，由于鼠标下方元素的更改，这反过来又会导致页面呈现不同的方式。一个简单的例子是：

<style type="text/css">
#one 
    position: relative;

#two 
    background-color: green;
    display: none;

#one:hover #two 
    display: block;

</style>

<script type="text/javascript">
$(window).load(function()
    $('#one').on('click', function() 
        $('#one').css('left', '100px');
    );
);
</script>

<div id="one">One
    <div id="two">Foo</div>
</div>

请参阅http://jsfiddle.net/Lq7Ac/1/ - 当您单击“One”时，元素会移动，因此不应再应用“:hover”样式，但它们实际上不会更新，直到您在单击后移动鼠标。

我可以在“点击”绑定中做些什么来立即重新计算/重新渲染？

更新：这似乎只影响 linux 上的 chrome。所以可能是chrome中的一个错误。不过，如果有人有解决此问题的想法，很高兴听到他们的声音。

【问题讨论】：

它确实应用到了 Chrome 上。

啊有趣，这似乎只影响 Linux 上的 Chrome。更新了问题

也会影响 OSX、ios 和 android 上的 Chrome 和 Safari。在使用 SPA 框架和移动浏览器时，这不是一个大问题，但有点烦人，因为在移动设备上根本没有鼠标移动，因此在您单击其他位置之前，悬停状态不会消失。

【参考方案1】：

可以尝试使用 css 类来代替 :hover 选择器。

http://jsfiddle.net/4tfYN/