Javascript .children issue/tooltip

Question

Я использую простой javascript/css для отображения всплывающей подсказки/увеличенной функции фотографии.

Фактическая страница находится в каталоге here. Это миниатюры с правой стороны.

Проблема в том, что по какой-либо причине функция mouseenter, всплывающая подсказка, похоже, не тянет правильное изображение. Он работает, но не тянет правильный образ. Он работал ранее, но потом я изменил CSS. Вопрос заключается в том, как получить изображение в всплывающей подсказке, в виде всплывающей подсказки класса. Благодарю.

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