Question

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

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

问题在于，由于某种原因，鼠标中心功能，工具提示似乎没有拉出正确的图像。它工作但没有拉出正确的图像。它以前工作，但后来我改变了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

在第167行的listings_layout.css中你有这个：

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

定位.thumbnail-items下的所有图片。只需指定您只想要作为锚点子节点的图像来获取宽度和高度。

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

Javascript .children问题/工具提示

1 个答案: