是否围绕图像的悬停事件显示内容？

Question

我试着做一些类似于movies.com的事情，就像他们在这里做的电影海报一样，http://www.movies.com/new-releases

当您将鼠标悬停在海报上时，将显示一个工具提示/弹出窗口，其中包含海报图像周围的所有必要信息。

对我来说，它将包括艺术家/乐队，描述，iTunes，流派，评级和PosterImage。

我一直在使用Javascript，但我真的一无所知。我注意到他们所有的脚本标签或工具提示html都在文本区域内。

如果任何人能够做一些类似或知道的事情，我将非常感激所有的帮助。

Answer 1

我想this就是你要找的人。最好使用一个库，而不是自己构建一个……

Answer 2

你也需要理解鼠标事件的处理。这篇jQuery教程link应该会有所帮助。查看mouseover事件。您也可以使用jQuery工具提示功能...

Answer 3

这是我会怎么做的。它并不完美，但希望它能让你走上正确的道路。当您将鼠标悬停在div上时，我将捕获该div的位置。然后在具有较低z索引的对象下方的div中淡入淡出。然后，我将把它的信息附加到那个div中，并使用我之前找到的位置坐标来定位#infodiv相对于您刚才悬停的div。然后当你将鼠标移出infodiv时，我们将隐藏它。你可以在这里找到一个可用的例子：http://jsfiddle.net/QWNmP/1/

$(document).ready(function() {

   $(".box").hover(function(event){
        var $el = $(this);
        var info = $el.find('.info').html();

        var BoxPostion = $(this).position();
          if ($('#infodiv').css('display') == 'none') {   
              $("#infodiv").css('left',BoxPostion.left+"px").hide().delay(100).fadeIn(500);
              $el.css('zIndex','10000');
              $('#infodiv').append(info);
           };

   });

    $('#infodiv').mouseleave(function() {
      $('#infodiv').empty().hide();
        $(".box").css('zIndex','1');
        $('.info').css('display','none');
    });




});