使用JQuery基于鼠标位置定位<b>标记</b>

Question

我有一些看起来像这样的HTML：

<div class="controller">
    <a href="#about" class="arrows" id="aboutarrow">
        <b id="aboutarrow">About</b>
    </a>
    <span class="arrows" id="middle"></span>
    <a href="#members" class="arrows" id="membersarrow">
        <b id="membersarrow">Members</b>
    </a>
    <a href="#servers" class="arrows" id="downarrow"></a>
    <a href="#servers" class="arrows" id="serversarrow">
        <b id="serversarrow">Servers</b>
    </a>
</div>

我希望根据鼠标的位置定位<b>标记的内容，但我只希望当鼠标滚过<a>的内容时显示内容，是一个50 x 50像素的块。

关于如何做到这一点的任何想法？我希望我已经提供了足够的信息。

Answer 1

使用CSS3： CSS3 LIVE DEMO （不会跟着鼠标......但是嘿！）

<小时/> 使用jQuery：

• 您可以使用a
跟踪内部b的{​​{1}}元素
• 比你刚刚在你的CSS中准备一个.has()元素，并将它与jQuery一起添加到DOM中
• 跟踪#tooltip，mouseenter和mouseleave您的工具提示的外观和动作

的 LIVE DEMO

mousemove

CSS：

$(function(){ // DOM ready

    $('body').prepend('<div id="tooltip" />');
    $tool = $('#tooltip');
    var toolW = $tool.outerWidth(true) / 2; // w/2 to make it always horiz. centered

    $('.controller a').has('b').on('mouseenter mouseleave', function( e ){

      var opac = e.type=='mouseenter' ? 1 : 0 ;
      var text = $('b', this).text();
      $tool.text(text).stop().fadeTo(300,opac, function(){
          if(opac===0)$tool.hide(); // if mouseleave make sure to hide tooltip
      });

    }).on('mousemove', function( e ){

       var mPos = {X: e.clientX, Y:e.clientY};
       $tool.css({left: mPos.X-toolW, top: mPos.Y+15});

    });

});

Answer 2

为什么不使用jQuery UI Tooltips，根据需要自定义，API允许您执行几乎所有操作，例如effects和mouse tracking。

这很容易使用：

在属性上设置标题：

<a href="#about" class="arrows" id="aboutarrow" title="about">
    <b id="aboutarrow">About</b>
</a>

然后抛出工具提示事件：

$(function() {
    $( document ).tooltip({
      track: true
    });
});

请参阅此fiddle并尝试一些事情！