Question

我试图用JS在mouseover事件中显示文本，我找到了一个可以做我想要的工作JS，但它似乎只能在其中一个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，我尝试了一点点修补它并且没有个人修复。所以我只是想找到一种方法来基本上让我所有的DIV都是＆＃34; lmg＆＃34;使用相同的鼠标悬停事件而不必制作多个JS文件。

我很抱歉，如果之前有人问过，我一定错过了它或搜索了错误的关键词。

如果这也可以通过更简单的方式完成，我也可以这样做。

Answer 1

HTML元素应具有唯一标识。您可以使用类来代替此方案。

例如：

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

标识符lImg对于每个div标记应该是唯一的（并且lImg也不是非常具有描述性，因此可能更喜欢更好的命名约定）。

在div个.imageHover标记上创建课程后，您可以使用课程$('.imageHover').hover( function(){ $(this).find('div').stop(true, true).animate({ 'bottom': '+=60' }, 300); }, function(){ $(this).find('div').stop(true, true).animate({ 'bottom': '-=60' }, 250); } );并绑定到点击事件。

{{1}}

多个DIV的JavaScript悬停事件

1 个答案: