Javascript 悬停图像显示说明

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

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

努克·奥纳雷正在庆祝奥基·欧康塞特图。但我只是个自由人，他是一个温和的人。。
$this（'.image'）.hover（函数（）{
//鼠标悬停功能
$（'.de'）.show（）；
}，函数（）{
//mouseOut函数
$（'.de'）.hide（）；
});

首先，您的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"/>

Nunc ornare正在向orci eu CONCENTETTUR进发。但我只是个自由人，他是一个温和的人。。

你有没有一个例子来说明当有更多的图片时你的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'）。悬停（函数（）{
//鼠标悬停功能
$（this.prev（'.de'）.show（）；
}，函数（）{
//mouseOut函数
$（this.prev（'.de'）.hide（）；
});
​

我使用了选择器“img”。但您可能需要使用类，也可能需要使用委托(http://api.jquery.com/on/)

这是小提琴：

快乐编码

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

---

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

更新了

在此脚本中使用

.next（）

：

只需找到悬停的

.image

div的下一个div

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

$（函数（）{
$（'.image'）.hover（函数（）{
//鼠标悬停功能
$（this.next（'.de'）.show（）；
}，函数（）{
//mouseOut函数
$（this.next（'.de'）.hide（）；
});​
});

---

在小提琴中找到它：

使用工具提示或在图像上设置alt标记检查答案中的小提琴。这在语义上可能是正确的，但对最终用户来说不是很有用。我甚至不确定它在语义上是否正确——我一直认为

alt

比

title

更受欢迎，哪怕只是因为它是强制性的。我可以理解为什么您会使用alt标记进行描述，因为它可能是所有标记中最被误用的标记之一。但是，alt标记的原始功能是在图像文件丢失/无法加载时提供备用文本。alt不是标记。在进一步的研究中，我同意，

alt

用于替代文本，而不是用于澄清文本。另外，

alt

对于图像是必需的，所以它应该在这个代码中。当然，你认为这是强制性的，这是对的。哎呀，这个问题读得不好。正在更新答案。我想需要检查离图像最近的div