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功能并不是必需的，但我发现这是一种很好的做法，因为它非常很容易忘记取消绑定来自DOM的事件你不能自由地使用.empty和.remove

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

4 个答案: