Question

我正在处理我的新产品组合，但是我在使用链接显示背景图片（设置为固定位置）时，文本颜色发生了一些问题。

Chrome上的所有内容都很好看，但是当我在Safari（v9.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属性，因为使用所需类，id或元素上的::hover修饰符可以很容易地在纯CSS中实现。

Answer 2

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

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

为什么链接的文字颜色会在悬停期间发生变化？

2 个答案: