Question

在下一页http://duncanmorley.com/上，存在以下问题：

无法突出显示文档中的文字
当用户将鼠标悬停在应用了“：hover”属性的对象上时，在CSS文件中，不会发生悬停效果（请参阅顶部的社交图标）（class =“fb”）

似乎页面上有一个透明对象，不允许用户与元素进行交互。我不确定这是什么，因为CSS文件中没有任何内容（我可以看到）表明这是问题所在。

我认为这些问题可能是一个问题的结果。

Answer 1

text-indent: -99999999px;会导致此问题，因为它也会修改悬停区域。

修复了Facebook分享按钮（示例）

从text-indent课程中移除fb样式，并将<li class="fb">Facebook</li>更改为<li class="fb"><span class="hide">Facebook</span></li>

现在，您可以为sr-only way：

设置文字样式

.hide {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

最后你应该得到同样的效果，＆＃34; Facebook＆＃34;文本将被隐藏用于视觉呈现，悬停效果将对整个元素起作用。

Answer 2

奇怪的是，你的文字缩进太大了。如果你改为-9999999px，Chrome似乎更喜欢它。

文本不会突出显示和：悬停不起作用

2 个答案: