Question

如果您在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上没有这些文物。

Answer 1

抱歉还不能发表评论。你能写下你的代码吗？

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

为什么我的动画CSS会留下文物（在Chrome中）？

1 个答案: