Javascript .children问题/工具提示

Question

我正在使用简单的javascript/css来显示工具提示/放大照片功能。

实际页面可以找到here.这是缩略图在右侧。

问题是，由于某种原因，mouseenter函数，工具提示似乎并没有拉正确的图像。它的工作，但不拉正确的形象。它以前工作，但后来我改变了CSS。问题是我如何让图像显示在工具提示中，在类tooltip中显示图像。谢谢。

<script type="text/javascript"> 
// Load this script once the document is ready 
$(document).ready(function() { 
    // Get all the thumbnail 
    $('div.thumbnail-item').mouseenter(function(e) { 

     // Calculate the position of the image tooltip 
     x = e.pageX - $(this).offset().left; 
     y = e.pageY - $(this).offset().top; 

     // Set the z-index of the current item, 
     // make sure it's greater than the rest of thumbnail items 
     // Set the position and display the image tooltip 
     $(this).css('z-index','15') 
     .children("div.tooltip") 
     .css({'top': y + 10,'left': x + 20,'display':'block'}); 

    }).mousemove(function(e) { 

     // Calculate the position of the image tooltip   
     x = e.pageX - $(this).offset().left; 
     y = e.pageY - $(this).offset().top; 

     // This line causes the tooltip will follow the mouse pointer 
     $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20}); 

    }).mouseleave(function() { 

     // Reset the z-index and hide the image tooltip 
     $(this).css('z-index','1') 
     .children("div.tooltip") 
     .animate({"opacity": "hide"}, "fast"); 
    }); 
}); 
</script> 
<style> 

.thumbnail-item { 
/* position relative so that we can use position absolute for the tooltip */ 
position: relative; 
float: left; 
margin: 0px 5px; 
} 

.thumbnail-item a { 
display: block; 
} 

.thumbnail-item img.thumbnail { 
border:3px solid #ccc; 
} 

.tooltip { 
/* by default, hide it */ 
display: none; 
/* allow us to move the tooltip */ 
position: absolute; 
/* align the image properly */ 
padding: 8px 0 0 8px; 
} 

.tooltip span.overlay { 
    /* the png image, need ie6 hack though */ 
    background: url(<?php echo base_url(); ?>3_party/imgtooltip/images/overlay.png)  no-repeat; 
    /* put this overlay on the top of the tooltip image */ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    display: block; 
    width: 350px; 
    height: 200px; 
} 
</style> 
<div class="picture"><?php echo '<img class="main_picture_box" src="' . base_url() .  'uploads/big_' . $main_image->image . '">'; ?></div> 

<div class="thumb-contain"> 
<!--picture loop max 25--> 
<?php 
foreach ($images as $i) { 
    echo '<div class="thumbnail-item">'; 
     echo '<a href="#">'; 
      echo '<img class="test" id="big_pic" onclick="swap()" src="' . base_url() . 'uploads/small_' . $i->image . '" class="thumbnail"/>'; 
     echo '</a>'; 
     echo '<div class="tooltip">'; 
      echo '<img src="' . base_url() . 'uploads/' . $i->image . '" alt="" width="330" height="185" />'; 
      echo '<span class="overlay"></span>'; 
     echo '</div>'; 
    echo '</div>'; 
} 
?> 

Answer 1

在listings_layout.css大约线路167你有这样的：

#tbroker-content .contain .thumb-contain .thumbnail-item img{ 
    width:52px; 
    height:52px; 
    margin:2px; 
} 

靶向所有.thumbnail项下的图像。只需指定您只需要作为锚的子项的图像即可获取宽度和高度。

#tbroker-content .contain .thumb-contain .thumbnail-item a img{ 
    width:52px; 
    height:52px; 
    margin:2px; 
}