多個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);
    }
);