悬停图像显示说明

Question

我想显示悬停图像上的描述，但是当悬停在图像上，然后所有图像显示说明。 我有下面的代码....

所有的

<?php if ($product['thumb']) { ?> 
    <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div> 
    <?php } ?> 

    <div style="display:none;" class="de"> Nunc ornare adipiscing orci eu consectetur. Ut justo libero, porttitor ac elementum luctus, bland.. 

    <img alt="Based on 2 reviews." src="catalog/view/theme/kid/stars1-4.png"/> 
    </div> 

    <script type="text/javascript"> 
    $this('.image').hover(function() { 
    // mouseOver function 
     $('.de').show(); 
    }, function() { 
    // mouseOut function 
    $('.de').hide(); 
    }); 
    </script> 

Answer 1

首先，你的DIV是显示器没有，你的形象里面。所以它不会被显示。

<div style="display:none;" class="de"> Nunc ornare adipiscing orci eu consectetur. Ut justo libero, porttitor ac elementum luctus, bland.. 
</div> 
<img alt="Based on 2 reviews." src="catalog/view/theme/kid/stars1-4.png"/> 

您是否有一个例子，说明您的html在有更多图像时的外观？这里的JavaScript我想出了，与您目前的HTML：

<script type="text/javascript"> 
    $('img').hover(function() { 
    // mouseOver function 
     $(this).prev('.de').show(); 
    }, function() { 
    // mouseOut function 
     $(this).prev('.de').hide(); 
    }); 
</script>​ 

我已经使用选择器“IMG”。但是，你可能想使用一个类，也许使用委托（http://api.jquery.com/on/）

这里的小提琴： http://jsfiddle.net/BvLPY/6/

编码快乐！

Answer 2

<img src="/some/dir" title="Your description" alt="alternate text"/> 

是添加说明的正确方法。请注意，我不太确定这是否是您要求的。

Answer 3

更新

使用.next()在此脚本：

刚刚找到下一个div来的徘徊.image DIV

<script> 
$(function(){ 
    $('.image').hover(function() { 
    // mouseOver function 
     $(this).next('.de').show(); 
    }, function() { 
    // mouseOut function 
     $(this).next('.de').hide(); 
    });​ 
}); 
</script> 

找到这个在小提琴：http://jsfiddle.net/SufeL/