多个DIV的JavaScript悬停事件

Question

我试图让文本出现在JS的mouseover事件上，但我发现一个可以正常工作的JS可以满足我的要求，但它似乎只能在其中一个DIV上工作，而不是所有DIV上都能工作。

这是HTML：

<TABLE><TR>
    <TD><A href="#"><DIV id="lImg">
       <IMG width=210px height=160px src="/img.png">
       <DIV id="lTxt">TXT1<BR>TXT2</DIV>
    </DIV></A></TD>
    <TD><A href="#"><DIV id="lImg">
       <IMG width=210px height=160px src="/img.png">
       <DIV id="lTxt">TXT1<BR>TXT2</DIV>
    </DIV></A></TD>
</TR></TABLE>

这是JS：

$(window).load(function(){
$('#lImg').hover(
    function(){
        $(this).find('div').stop(true, true).animate({
            'bottom': '+=60'
        }, 300);
    },
    function(){
        $(this).find('div').stop(true, true).animate({
            'bottom': '-=60'
        }, 250);
    }
);
});

我有多个DIV，我希望它可以处理，但是我对JS不太了解，因此我尝试了一些修补，但个人没有修复。 因此，我只是想找到一种方法来基本上使所有“ lImg”的DIV都具有相同的鼠标悬停事件，而不必制作多个JS文件。

我的歉意，如果以前被问过，我一定错过了它或搜索了错误的关键词。

如果也可以用更简单的方式做到这一点，那么我也支持。

Answer 1

HTML元素应具有唯一的标识符。 您可以在这种情况下使用类。

例如：

<DIV id="lImg" class="imageHover">

标识符lImg对于每个div标签应该是唯一的（并且lImg也不具有很好的描述性，因此最好使用更好的命名约定）。

在两个div标签上都具有该类之后，就可以使用.imageHover类并绑定到click事件。

$('.imageHover').hover(
    function(){
        $(this).find('div').stop(true, true).animate({
            'bottom': '+=60'
        }, 300);
    },
    function(){
        $(this).find('div').stop(true, true).animate({
            'bottom': '-=60'
        }, 250);
    }
);