HTML onmouseover doesn't work to show up text

Posted by REALFREE on Stack Overflow See other posts from Stack Overflow or by REALFREE
Published on 2012-04-13T09:18:35Z Indexed on 2012/04/16 5:29 UTC
Read the original article Hit count: 419

Filed under:
|
|

I'm trying to show some information on a picture when onmouseover/onmouseout event occurs. What I want to achieve is something like this website does on top selling.

My code is like this:

<div class="container" onmouseover="$('#info').css('display','block');" onmouseout="$('#info').css('display','none');">
<img src=...">
    <div id="info" style="display:none">
       ... some text ...
</div>
</div>

So div info block is initially hidden, but when mouse is on a picture I want the information to appear on corresponding picture (with tint background on the image to see text well). But somewhat it doesn't work. I appreciate any suggestion how to approach this problem.

Edit: more precisely, the reason why I choose to use inline because I need to show/hide text corresponding to the image(contain unique div id)that user put their mouse on/out. That means I have many div container and each container has unique div id.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about html