Question

我正在尝试制作一个div .description，它出现在鼠标悬停在元素上的位置。

到目前为止，我已将此代码用于使div显示在固定位置：

$('.tooltip').mouseover(function(e) {
  // var to link tooltips and hand to description
  var target = $(this).attr('data-show');

  // hide current description if showing
  if ($('.description').is(':visible')) {
    $('.description').fadeOut(0);
  };

  e.stopPropagation();
  $('#' + target).fadeIn(400);
});

$('body').mouseover(function(){
  $('.description').fadeOut(0);
});

它工作正常，但不是只有.description出现，我需要它出现在鼠标悬停的地方。

我尝试添加此功能：

function divPosition (event){
  // pass mouse position to description div css
  $(".description").css({top: event.clientY, left: event.clientX- 200});
};

但它不起作用。我也尝试在函数中添加行，但我不确定如何传递事件参数。

请参阅我的JSfiddle：https://jsfiddle.net/bns4zp1q/2/

对我如何改进代码的任何帮助或见解都将非常感激。感谢

Answer 1

您可以收听mousemove事件，并使用divPosition功能。

https://jsfiddle.net/agbuLop1/

$('.tooltip').mousemove(divPosition);

function divPosition (event){
  // pass mouse position to description div css
  $(".description").css({top: event.clientY, left: event.clientX- 200});
};

Answer 2

描述是否真的必须遵循鼠标移动或只是出现在悬停的圆圈？这是一个快速而又脏的示例，没有javascript ：

https://jsfiddle.net/k9jpqom2/1/

（新）HTML：

echo *_TEx*.dat

（附加）CSS

window.location.href

如果您不想编辑HTML ，可以尝试以下方式：

https://jsfiddle.net/g2p5g2r4/2/

<div class="tooltip-container">
    <div class="image" id="machine1">
        <img src="http://axevilw.sellamachine.com/EnhFiles/advert/182/Machine.jpg/Machine.jpg">
        <div class="tooltip" id="tooltip1" data-show="description1">1
           <div class="description-container">
             <div class="description" id="description1">
                LED Strip Lighting
             </div>
           </div>
        </div>
    </div>
</div>

您必须微调＃description1，＃description2等的位置......

让div显示在

2 个答案: