html - 我的动画CSS如何离开工件(在Chrome中)？

如果您在Chrome浏览器中查看http://keepskatinbro.com，您会注意到，将鼠标悬停在标题上之后，在将鼠标悬停在标题两侧后会留下一些文物。

我从http://desandro.com那里得到了这个主意（请看页面底部）。但是，德桑德罗（Desandro）没有文物。

这是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上没有这些工件。

最佳答案

抱歉，暂时无法发表评论。你可以写下代码吗？

顺便说一句，只需尝试使用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;
}