为什么在悬停过程中链接的文本颜色会发生变化？

Question

我正在制作我的新作品集，但我在悬停链接以显示设置为固定位置的背景图像时遇到了一些文本颜色更改的问题。

在Chrome上看起来一切正常，但当我在Safari (9.1.3版)中测试它时，颜色发生了变化。

有人知道这是怎么回事吗？谢谢你的帮助

你可以在这里看到源码：http://diegofria.com/test/new/index.html

HTML

<ul title="drag me, too" class="small-links">

 <li id="monocle"><a href="pages/monocle.html">Monocle</li>
 <li id="stutterheim"><a href="pages/stutterheim.html">Stutterheim</a></li>
 <li id="dagmar"><a href="pages/dagmar.html">House of Dagmar</a></li>
 <li id="reschia"><a href="pages/reschia.html" >Reschia</a></li>
 <li id="freya"><a href="pages/freya.html">Architect's portfolio</a></li>

 </ul>

Jquery

           $("#monocle").hover(
              function () {
                  $('body').css("background", 'url(images/monocle.jpg) no-repeat fixed center' );
              }, 
              function () {
                  $('body').css("background", "#f5f5dc");
              }
            );

Answer 1

这里的问题可能是应用了::hover的默认样式，因为您没有显式定义它。

您应该能够通过在CSS中定义悬停时的显式颜色来解决此问题。

一般来说，我建议不要在悬停时使用jQuery来更改CSS属性，因为在纯CSS中，对所需的类、id或元素使用::hover修饰符可以很容易地实现这一点。

Answer 2

闪烁看起来像是Safari/Webkit文本转换错误。这可能是由于切换悬停时的背景位置造成的。

向body元素添加-webkit-font-smoothing: subpixel-antialiased;将直观地解决该问题。