Jquery 将鼠标悬停在文本上时出现的wierd冒号（：）

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();
    });
});

$（函数（）{
$（'#twitter'）。悬停（函数（）{
$（this.append（“
twitter
”）；
$（'.hvtext'）.css（{左：'1.7em'，下：'0.1em'}）；
}，函数（）{
$（'.hvtext'）.hide（）；
});
$（'#about'）。悬停（函数（）{
$（this.append（“
about
”）；
$（'.hvtext'）.css（{左：'1.7em'，下：'0.1em'}）；
}，函数（）{
$（'.hvtext'）.hide（）；
});
$（'#contact'）。悬停（函数（）{
$（此）.append（“
联系方式
”）
$（'.hvtext'）.css（{左：'1.2em'，下：'0.1em'}）；
}，函数（）{
$（'.hvtext'）.hide（）；
});
$（“#体验”）。悬停（函数（）{
$（this.append（“
exp
”）；
$（'.hvtext'）.css（{左：'2.3em'，下：'0.1em'}）；
}，函数（）{
$（'.hvtext'）.hide（）；
});
$（'#prices'）。悬停（函数（）{
$（此）.append（“
price
”）；
$（'.hvtext'）.css（{左：'2em'，下：'0.5'}）；
}，函数（）{
$（'.hvtext'）.hide（）；
});
});

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

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

：

）

截图：

---

我不认为这是一个

：

（冒号）

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

这可能是问题所在的证据

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

2.这两个点也在垂直和水平方向上完美排列，在t和点之间没有空间

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

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

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

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

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

---

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

我认为这不是冒号。这是

t

最右边的提示。可能是t，它确实与“contact”一起出现，但在这里也稍微出现了：你能发布你的HTML部分吗？本节的HTML：就像我说的，它们只是普通的，文本和悬停是动态添加的。JVtext类由js动态添加的。append:$（this）。append（“

关于

”）；是的，关于自定义字体，你可能是对的，我会尝试使用普通字体。“我不认为这是一个：（冒号）。。"我只是想说这就是它看起来的样子like@joe尝试更改文本。ok将单词更改为“Hello”，圆点消失了：还值得注意的是，圆点在单词“exp”和“price”上根本没有显示：我将字体更改为“Arial”，虽然圆点不太明显，但您仍然可以在t的底部看到一个非常小的白点：试试我刚才添加到答案中的代码，看看会发生什么。。。确保

a

指向有问题的元素