JavaScript Hover event for multiple DIV

Question

I'm trying to have text appear on mouseover event with JS and I found a working JS that will do what I want but it only seems to work on one of the DIVs and not all of them.

Here is the 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>

and this is the 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);
    }
);
});

I have Multiple DIVs that I want this to work on but I don't know too much about JS and I tried tinkering with it a little and got no fix personally. So I'm just trying to find a way to basically have all my DIVs that are "lImg" to have the same mouseover event work without having to make multiple JS files.

My Apologies if this was asked before, I must have missed it or searched for the wrong keywords.

If this can also be done in a simpler way I'm up for that too.

you really should try to understand what you're writing first before you post a question — Don
– Don, Commented Oct 29, 2014 at 17:41
please don't use all caps when writing html code. it burns our eyes — foxygen
– foxygen, Commented Oct 29, 2014 at 17:49

Darren · Accepted Answer · 2014-10-29 17:45:38Z

4

HTML elements should have unique identifers. You can use a class instead for this scenario.

For example:

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

The identifier lImg should be unique to each div tag (And lImg isn't very descriptive either so a better naming convention may be preferred).

Once you have the class on both div tags, you can then use the class .imageHover and bind to the on the click event.

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

edited Oct 29, 2014 at 17:45

answered Oct 29, 2014 at 17:39

Darren

71.2k24 gold badges141 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript Hover event for multiple DIV

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related