javascript - 工具提示不适用于我的 CSS

Question

为什么我的工具提示无法与此处的 CSS 一起使用？ <强> http://jsfiddle.net/BG4Sn/

请查看 jsfiddle，问题是，在包含我的 css 的情况下，在鼠标进入链接 tooltip1 和 tooltip2 后，工具提示不会显示真正的框工具提示& 工具提示3 。当我在 html head 中删除指向我的 css 的链接时，它是正确的。

function tool_tip() {
        //var tip = $('.tool_tip').closest('li').find('div').clone();
        $('.tool_tip').mouseenter(function () {
            var $this = $(this),
                $div = $this.closest('li').find('div');
            $(this).attr('title', '');
            $div.fadeTo(300, 0.9);
        }).mousemove(function (e) {

            $('.tooltip').css('bottom', e.pageY + -10);
            $('.tooltip').css('left', e.pageX + 10);

        }).mouseleave(function () {
            $('.tooltip').hide();
        })
    }
tool_tip();

Answer 1

在您的 style_s.css 中应用于 .tooltip 的 CSS 与您的 JSFiddle 不同。将此 .tooltip 样式复制并粘贴到 style_s.css 中:

.tooltip {
    background-color: #E5F4FE;
    display: none;
    padding: 5px 10px;
    background-color: #E5F4FE;
    border: #5A5959 1px solid;
    position: fixed;
    z-index: 9999;
    color: #0C0C0C;
    font-size: 0.688em;
}

然后链接到 style_s.css 将产生相同的样式。