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

Question

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过渡。

然而，当您将鼠标悬停在第一个，第二个和第三个块/文本的末尾时，会出现一个奇怪的白色冒号（:）。

屏幕截图：

Answer 1

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

我要猜测并说这是渲染字体的浏览器错误，看起来你正在使用自定义字体，而且我总是遇到铬斩断问题我的字体底部，但如果我向上和向下滚动一下它就会消失，如果它是我认为它是我认为你不会找到解决方法。

  

证明这可能是问题

     

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

     

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

如何确认这实际上是问题？

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

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

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

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