悬停图像显示说明

Question

I am trying to display description on hover image but when hover on image then all image display description. I have the following code....

    <?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

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

Is the correct way of adding an description. Mind you, I'm not quite sure if that's what you're asking.

Answer 2

First of all, your div is display none, and your image is inside it. So it won't be displayed.

<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"/>

Do you have an example of how your html looks when there are more images? Here's the javascript I came up with, with your current html:

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

I've used the selector "img". But you might want to use a class, and maybe use a delegate (http://api.jquery.com/on/)

Here's the fiddle: http://jsfiddle.net/BvLPY/6/

happy coding!

Answer 3

updated

use .next() in this script:

just find the next div to the hovering .image div

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

find this in the fiddle: http://jsfiddle.net/SufeL/