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

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

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

Answer 2

首先，你的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 3

<强>更新

在此脚本中使用.next()：

只需找到悬停.image div

的下一个div

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

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

悬停图像显示说明

3 个答案: