javascript - 工具提示框的显示样式

不知道为什么当在.show_tooltip上输入鼠标时会留下工具提示框(类li a)，我想在每个工具提示框的顶部显示与鼠标输入相同的链接，如果宽度和高度或多或少是同一样式。希望链接正确放置) DEMO

我想举这个例子(对于how):我该怎么办？

CSS:

.show_tooltip{
    background-color: #E5F4FE;
    display: none;
    padding: 5px 10px;
    border: #5A5959 1px solid;
    position: absolute;
    z-index: 9999;
    color: #0C0C0C;
    /*margin: 0 0 0 0;
    top: 0;
    bottom: 0;*/
}

HTML:

<ul>
    <li>
    <div class="show_tooltip">
        put returns between paragraphs
    </div>
        <a href="#">about</a>
    </li>
    <br>
    <li>
    <div class="show_tooltip">
        for linebreak add 2 spaces at end
    </div>
        <a href="#">how</a>
    </li>
</ul>

jQuery:

$("li a").mouseenter(function(){
     $(this).prev().fadeIn();
}).mousemove(function(e) {
            $('.tooltip').css('bottom', e.pageY - 10);
            $('.tooltip').css('right', e.pageX + 10);
        }).mouseout(function(){
     $(this).prev().fadeOut();
})

最佳答案

试试这个:http://jsfiddle.net/keepyourweb/ecR2S/2/