爲什麼在懸停期間鏈接的文本顏色會發生變化？

我正在研究我的新投資組合，但我在懸停鏈接以顯示設置爲固定位置的背景圖像時出現文本顏色更改的問題。爲什麼在懸停期間鏈接的文本顏色會發生變化？

在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"); 
       } 
      );

來源

2017-01-29 Diego Fria

這裏的問題可能是一個默認樣式：：懸停正在被應用，因爲你沒有明確地定義它。

您應該能夠通過在CSS中懸停期間定義顯式顏色來解決它。

一般來說，我建議不要使用jQuery來改變懸停時的CSS屬性，因爲在所需的類，id或元素上使用::hover修飾符可以很容易地在純CSS中實現。

來源

2017-01-29 18:02:06 Edrosos

閃爍看起來像一個Safari/Webkit文本轉換錯誤。這可能是由懸停時切換背景位置造成的。

將-webkit-font-smoothing: subpixel-antialiased;添加到body元素可以在視覺上修復問題。

來源

2017-01-29 18:07:50

啊！這工作。感謝Alex。 –

爲什麼在懸停期間鏈接的文本顏色會發生變化？

回答

相關問題