Javascript 将鼠标悬停在div上时弹出图像（Jquery）

我需要一些帮助。 我想在鼠标位于div上方的位置显示一个图像。 没有代码可以显示，因为我在实现这一点上失败了很多次

---

谢谢。

您可以使用

悬停事件：

$("div").hover(function() {
    $("img").show();
}, function() {
    $("img").hide();
});


这将取代文本

$(document).ready(function(){
   $('#mouseOver').mouseover(function(e){
        $('#imageReplace').empty()
        $('#imageReplace').append("<img src=\"http://placekitten.com/120/120\" />"); 
    })
})

$（文档）.ready（函数（）{
$（'#mouseOver'）。mouseOver（函数（e）{
$（'#imageReplace'）.empty（）
$（'#imageReplace'）。追加（“”）；
})
})

empty
函数实际上不是必需的，但我发现这是一个很好的实践，因为如果不自由地使用
。empty
和
。remove
您肯定不需要使用javascript，就很容易忘记从DOM中解除事件绑定。这适用于最新版本的Chrome，使用供应商前缀进行转换


HTML

来自您的原始问题和此评论（“您好，谢谢您的回复。图像需要在div上方弹出鼠标点。移动鼠标会将图像位置更改为鼠标所在的位置。不过，谢谢！”）

我创建了这个解决方案：


将鼠标悬停在div上：图像变为可见并跟随鼠标指针

单击：图像变为不可见并停止跟随

HTML:

谢谢你的回复。谢谢。它几乎需要“弹出”，这样就不会影响页面上的任何css元素。使用此方法会使img出现（鼠标也不在其中），但也会影响其他元素。再次感谢。然后你需要应用CSS和配置你的页面-没有任何HTML来查看，那么我就无能为力了。看看它是如何将文本推到另一部分的，而不是在鼠标点上悬停。我不确定你想发生什么，但尝试一下，让我知道什么不起作用。你好，谢谢你的回复。图像需要在div上弹出鼠标点。移动鼠标会将图像位置更改为鼠标所在的位置。谢谢你！
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <span id="mouseOver"><img src="http://placekitten.com/120/120">Mouse Over This</span>     
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

#mouseOver {
    display: inline;
    position: relative;
}

#mouseOver img {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 1em;
    opacity: 0;
    pointer-events: none;
    transition-duration: 800ms;    
}

#mouseOver:hover img {
    opacity: 1;
    transition-duration: 400ms;
}

<div class="someDiv">
  <p>Foobar</p>
</div>
<img style="display:none" class="image" src="http://www.budick.eu/images/logo-BudickEu.jpg"/>

$(".someDiv").hover(function() {
  $(document).mousemove(function(event) {
    $(".image").css({"position":"absolute","left":event.clientX ,"top":event.clientY     }).show();    
  });    
});

//end movement with click
$(document).bind("click",function(){
  $(document).unbind("mousemove");
  $(".image").hide();
});