我的動畫CSS怎麼會留下工件（在Chrome中）？

如果您在Chrome瀏覽器中查看http://keepskatinbro.com，您會注意到，在將標題懸停後，在您懸停後會在標題的側面留下殘留的文物。我的動畫CSS怎麼會留下工件（在Chrome中）？

我從http://desandro.com（看看頁面的底部）得到了想法。但是德桑德羅沒有任何文物。

這裏的HTML：

<h1 id="logo"> 
    <a class="" id="home_link" href="http://keepskatinbro.com/" title="Keep Skatin' Bro" rel="home"> 
     <span id="keep">KEEP</span><br> 
     <span id="skatin">SKATIN'</span><br> 
     <span id="bro">BRO</span> 
    </a> 
</h1>

這裏的CSS：

#header{ 
    margin-bottom:30px; 
    background:#FFF; 
    border-bottom:1px solid rgba(0,0,0,0.15); 
} 
    #header h1 a{ 
     color:#757575; 
     text-shadow: 1px 1px #181818, 2px 2px #181818, 3px 3px #181818, 4px 4px #181818, 5px 5px #181818, 6px 6px #181818, 7px 7px #181818, 8px 8px #181818; 
     /*-moz-text-shadow:2px 2px 2px rgba(0,0,0,1);*/ 
    } 
     #header h1 a:hover{ 
      color:#fff; 
      text-shadow: 1px 1px #58e, 2px 2px #58e, 3px 3px #58e, 4px 4px #58e, 5px 5px #58e, 6px 6px #58e, 7px 7px #58e, 8px 8px #58e, 9px 9px #58e, 10px 10px #58e, 11px 11px #58e; 
     }

我爲什麼可能有這個問題？我之前已經注意到，在Chrome中使用其他站點時似乎......但是，Desandro在desandro.com上沒有這些工件。

來源

2011-03-11 trusktr

無法重現的錯誤，但要注意徘徊的標題時，該職位的圓形邊框得到了廣場（在Chrome中，不在FF中） – yoda 2011-03-11 01:03:51

FWIW，在Windows 7的Chrome 10.0.648.127中懸停後，我在左邊看到了一些藍色的文物。如果我沒有專門查找它們，我不認爲我會注意到它們！ – 2011-03-11 01:09:27

我上面發佈了我的代碼。 – trusktr 2011-03-11 01:18:44

抱歉，還無法評論。你能寫下你的代碼嗎？

順便說一句，只要嘗試更改mouseout與mouseleave事件或反之亦然。

編輯

這似乎是一個不好的Chrome懸停事件處理（你可以離開的標誌輕輕測試）。

隊負，透明陰影當鏈接不叮：

#header h1 a { 
    color: #757575; 
    text-shadow: 1px 1px #181818, 2px 2px #181818, 3px 3px #181818, 4px 4px #181818, 5px 5px #181818, 6px 6px #181818, 7px 7px #181818, 8px 8px #181818, -1px -1px transparent, -2px -2px transparent, -3px -3px transparent; 
}

來源

2011-03-11 01:05:08

感謝盧卡，但它不是JavaScript。這是純粹的HTML/CSS，但不適用。我張貼我的來源。 – trusktr 2011-03-11 01:16:06

我編輯了我的答案。 – 2011-03-11 01:39:17

哇，很酷，謝謝！這確實是一個很好的解決方案。呵呵。但Chrome開發人員需要修復這個小錯誤。 – trusktr 2011-03-11 03:22:13

我的動畫CSS怎麼會留下工件（在Chrome中）？

回答

相關問題