Question

我有一个特定于Safari的悬停效果问题：当用户在圆圈上移动时，应在其上方显示另一个圆圈（偏移）。

这样可行，但是当用户将光标移离圆圈时，悬停圈的某些部分仍会保留，直到浏览器重新绘制网站（不确定“重绘”是否是正确的术语）。例如，您可以使用Cmd + A来选择所有文本。悬停 - 残羹剩饭将消失。

我认为一个例子表明它是最好的： http://jsfiddle.net/L81h9hjr/3/

<div class="wrap">
  <h1><a href="#"><span>Reply<span>Our services</span></span></a></h1>
</div>

该示例在我测试的其他浏览器中完美运行，因此您需要Mac Safari（我尝试过8.0.6）。

Answer 1

This is a repaint/redraw issue with Safari / webkit (not sure why it's only on Safari and not Chrome).

I worked around this issue by attaching a jQuery event to the hover element that forced it's surrounding/parent elements to redraw (in my case, a hide() and then a show(0)).

  $('.hover-element').on('mouseleave',function(){
    $(this).parents(".containing-element").hide().show(0);
  });

Make sure you use show(0) not just show(), for some reason plain old show() doesn't get fired without an animation argument.

Mac上的Safari不会在悬停效果后更新/重绘

1 个答案: