Question

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

当您将海报悬停时，会出现工具提示/弹出窗口，其中包含海报图像周围的所有必要信息。

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

我一直在使用Javascript，但我确实没有线索。我注意到他们所有的脚本标签或工具提示html都在textarea内。

如果有人能够做某事或知道，我会感激所有的帮助。

Answer 1

我认为this正是您所寻找的......最好使用一个库，而不是自己构建一个库...

Answer 2

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

Answer 3

我将如何做到这一点。它并不完美，但它有望让你走上正确的道路。当你将鼠标悬停在div上时，我将捕获该div的位置。然后用较低的z-index淡入该对象下方的div。然后我会将它的信息附加到该div并使用我之前找到的postion坐标来定位#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');
    });




});

在悬停事件中显示图像周围的内容？

3 个答案: