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

Question

我需要协助。 我想让图像出现在鼠标位于div上方的位置。 我没有代码可以展示，因为我多次失败都没能实现这一目标。

谢谢。

Answer 1

从你原来的问题和这个评论（“你好，感谢回复。图像需要弹出关于鼠标点的div。移动鼠标将图像位置更改为鼠标所在的位置。非常感谢！”）

我创建了这个解决方案

http://jsfiddle.net/YPu96/1/

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

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

HTML：

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

JavaScript的：

$(".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();
});

Answer 2

你绝对不需要使用javascript。 这适用于最新版本的Chrome，使用供应商前缀进行转换。

http://jsfiddle.net/pKYu2/16/

HTML

<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>

CSS

#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;
}

Answer 3

您可以使用hover事件：

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

Answer 4

http://jsfiddle.net/pKYu2/2/

这将取代文字

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

empty函数不是必需的，但我发现这是一个很好的练习，因为如果不自由使用.empty和.remove 很容易忘记从DOM解除绑定事件