当鼠标悬停在一个div上时弹出图片（Jquery）

Question

我需要一些帮助。 我想让一个图像出现在鼠标悬停的div上。 由于多次尝试失败，我没有可以展示的代码。

谢谢。

- Toby Mellor

Answer 1

根据你的问题和评论（“你好，感谢回复。图像需要在鼠标点上方弹出。移动鼠标会更改图像位置到鼠标所在位置。谢谢！”），我创建了以下解决方案：

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

- Daniel Budick

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

- Michael

Answer 3

您可以使用 hover 事件：

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

- tymeJV

---

谢谢回复。非常感谢。它需要几乎“弹出”，这样就不会影响页面上的任何CSS元素。使用这种方法，使得图片出现（也不是在鼠标所在位置），但也会影响其他元素。再次感谢。 - Toby Mellor

然后您需要应用CSS并配置页面 - 如果没有HTML可供查看，那么我无法提供帮助。 - tymeJV

请查看它如何将文本分开而不是悬停在鼠标点周围：http://jsfiddle.net/f7zJ7/ - Toby Mellor

我不确定你想要发生什么，但是尝试一下并让我知道哪里出了问题。 - tymeJV

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 中解除事件绑定。

- Tombert

---

你好，感谢回复。需要让图像在鼠标指针上方弹出。移动鼠标会改变图像位置到鼠标所在的位置。还是非常感谢！ - Toby Mellor