悬停图像显示描述

Hover image display description

本文关键字：描述 显示 图像 悬停      更新时间：2023-09-26

我试图在悬停图像上显示描述，但当悬停在图像上时，所有图像显示描述。我有以下代码....

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

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

是添加描述的正确方式。请注意，我不太确定你问的是不是这个。

已更新

使用.next():

找到下一个div到悬停的.imagediv

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

查看http://jsfiddle.net/SufeL/

首先，你的div是display none，你的图像在里面。所以它不会显示

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

编码快乐!

相关文章：