Question

在此简单示例中未包含引导链接，以下代码按预期执行：将鼠标悬停在任何单词上会将单词变为红色，而将鼠标悬停在其后会将其返回黑色。

包含引导链接后，红色/黑色的更改仍然可以正常工作，但由于某种原因，字体变为粗体并保持这种状态。

有没有办法阻止引导程序在悬停时将字体保留为粗体？

在徘徊之后展示大胆的启用：http://jsfiddle.net/vLtsw4vb/

注释掉或删除引导链接会产生所需的行为。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script>
        $(document).ready (function () {
            $('.ztag')
            .hover (
                function () {
                    $(this).css({color: '#ff0000'})

                },
                function () {
                    $(this).css({color: '#000000'})
                }
            )
        }) 
    </script>
</head>
<body>
    <span class='ztag'>foo</span>
    <span class='ztag'>bar</span>
    <span class='ztag'>stuff</span>
</body>
</html>

Answer 1

引导程序使用的原始黑色是#333。您将其更改为#000，这使其看起来更大胆。

试试这个

$(document).ready (function () {
    $('.ztag')
    .hover (
        function () {
            $(this).css({color: '#ff0000'})
        },
        function () {
            $(this).css({color: '#333333'})
        }
    )
})

Answer 2

添加font-weight值，请参阅：http://jsfiddle.net/vLtsw4vb/2/

如何防止bootstrap使字体变粗？

2 个答案: