悬停在文本上时出现奇怪的冒号 (:)答案

【问题标题】：wierd colon (:) appearing when hovering over text悬停在文本上时出现奇怪的冒号 (:)
【发布时间】：2013-12-11 13:44:47
【问题描述】：

CSS

.hvtext {
    font-family:mainText;
    font-size:14px;
    color:rgba(255,255,255,1);
    font-weight:bold;
    position:absolute;
    -webkit-transition: 0.5s ease-in-out;
}

.hvtext:hover {
    cursor:pointer;
    color:rgba(51,51,51,1);
}

JavaScript：

$(function () {
    $('#twitter').hover(function () {
        $(this).append('<p class="hvtext">twitter</p>');
        $('.hvtext').css({left:'1.7em', bottom: '0.1em'});
    }, function () {
        $('.hvtext').hide();
    });

    $('#about').hover(function () {
        $(this).append('<p class="hvtext">about</p>');
        $('.hvtext').css({left:'1.7em', bottom:'0.1em'});
    }, function () {
        $('.hvtext').hide();
    });

    $('#contact').hover(function () {
        $(this).append('<p class="hvtext">contact</p>')
        $('.hvtext').css({left:'1.2em', bottom:'0.1em'});
    }, function () {
        $('.hvtext').hide();
    });

    $('#experience').hover(function () {
        $(this).append('<p class="hvtext">exp</p>');
        $('.hvtext').css({left:'2.3em', bottom:'0.1em'});
    }, function() {
        $('.hvtext').hide();
    });

    $('#prices').hover(function () {
        $(this).append('<p class="hvtext">price</p>');
        $('.hvtext').css({left:'2em',bottom:'0.5'});
    }, function () {
        $('.hvtext').hide();
    });
});

将鼠标悬停在其中一个 div 上时会动态添加文本（图片中的紫色 div）。当您将鼠标悬停在文本上时，它会改变颜色，并且我添加了一个 css3 过渡。

但是，当您将鼠标悬停在第一个、第二个和第三个块/文本的末尾时，会出现一个奇怪的白色冒号 (:)。

截图：

【问题讨论】：

我不认为这是一个冒号。这是t最右边的提示。
可能是 t，它确实与 'contact' 一起出现，但在这里也略有出现：i.imgur.com/dT2rFL9.png
你能发布你的 HTML 部分吗？
本节的 html：jsfiddle.net/7nNLy 就像我说的它们只是普通的
并且文本和悬停是动态添加的
hvtext 类由 js 动态添加 .append: $(this).append('
about
');

【解决方案1】：

我不认为这是:（冒号）..

我会猜测一下，这是渲染字体的浏览器错误，看起来您使用的是 自定义字体，我总是遇到 chrome 切断字体的问题我的字体底部，但如果我向上和向下滚动一点它就会消失，如果这是我认为的那样，我认为你不会找到解决这个问题的方法。

这可能是问题的证据

1.如果你仔细看截图，你可以看到点与t的底部完美对齐并交叉到中上。

2. 2个点也完美地垂直和水平排列，t和点之间没有空间。

我如何确认这确实是问题所在？

将单词改为HELLO，然后看看会发生什么

试试这个测试代码，看看会发生什么

window.setInterval(function() {
    $('a').css('color', '#444');
}, 700);

看看重新渲染元素是否会修复它。

【讨论】：

是的，您对自定义字体的看法可能是正确的，请尝试使用普通字体。 “我不认为这是一个 :（冒号）..” 我的意思是它看起来像这样
@joe 尝试更改文本。
ok 将单词更改为 'Hello' 并且点消失了：i.imgur.com/iWfXTIX.png 还值得注意的是，点根本不会出现在单词 'exp' 和 'price' 上：@ 987654322@
我将字体更改为“Arial”，虽然这些点不太明显，但您仍然可以在 t 的底部看到一个非常小的白点：i.imgur.com/O5Uwzlk.png
试试我刚刚添加的代码来回答，看看会发生什么...确保a指向有问题的元素