1

请查看我的实时站点http://mozzor.com并将鼠标悬停在顶部的圆圈图标上。请注意仅在 Firefox 中出现的两种效果（我使用的是 FF23）：

1) 工具提示文本中添加了蓝色下划线

2）文本在悬停时呈现，然后过了一会儿，似乎模糊了自己。

我在使用 Firebug 进行调试时遇到了麻烦……我找不到与这些效果中的任何一个相对应的 css 元素。

以防万一，这里有一些关于我如何设置工具提示样式的相关代码：

// Variable currentSelect corresponds to hex color value
// selected in the jQuery widget seen at the top left side of the page
$('#notebookIcon,#pencilIcon,#headphoneIcon').tooltip().on("mouseover", function () {
    var tooltip = $(this).next(".tooltip");
    //Box
    tooltip.find(".tooltip-inner").css({
        backgroundColor: "#fff",
        color: currentSelect,
        borderColor: currentSelect,
        borderWidth: "1px",
        borderStyle: "solid"
    });
    //Arrow
    tooltip.find(".tooltip-arrow").css({
        //borderTopColor: currentSelect,
        //borderLeftColor: currentSelect,
        //borderRightColor: currentSelect,
        borderBottomColor: currentSelect
    });
});

编辑：第二个问题似乎在 Firefox 中缓慢处理字体别名。尝试几种不同的字体后问题仍然存在。有关更多信息，请参见下文：

Github 问题：https ://github.com/twbs/bootstrap/issues/10218

Bugzilla 问题：https ://bugzilla.mozilla.org/show_bug.cgi?id=909814

4

1 回答 1

1

您的第一个问题是下划线，它由 CSStext-decoration属性决定。我不确定为什么它会在 Firefox 上发生（Chrome 似乎正确，因为您的菜单项的文本装饰设置为无）。这是一个快速修复，但我会看看我是否能找到原因。

#iconrow a {
    text-decoration: none;
}

关于第二个问题：我不明白为什么你不能用 CSS 做到这一点。

于 2013-08-27T05:32:16.750 回答