0


I have a variable amount of div that contain pictures.
When PHP finished work - HTML code looks like:

<div id="img_container1" class="count"><div id="text1" class="text">Example1</div></div>
<div id="img_container2" class="count"><div id="text2" class="text">Example2</div></div>
<div id="img_container3" class="count"><div id="text3" class="text">Example3</div></div>
.
.
.

What I want to do is to show #text1 inside #img_container1, #text2 inside #img_container2 ... and so on after hover mouse on #img_container* but my script doesn't work.
jQuery script:

$(document).ready(function(){

        var count = $('.count').size(); 
        for ( var i = 1; i <= count; i++ )
        {
            $("#img_container" + i).hover(function()
            {
                $("#text" + i).fadeToggle();
            });
        } });

When I hover mouse on any #img_container* nothing appears

CSS code:

.count
{
position:relative;
border: 2px solid #C3BEC1;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
height: 200px;
width: 150px;
margin: 50px 0 0 48px;
}
.text
{
position: absolute;
bottom: 0; 
left: 0;
width: 140px;
display:none;
}
user3192352
  • 13
  • 2
  • Where are your `#dane_index` elements? Where are your `#text_index` elements? To me looks like you fast copy-pasted a script from somewhere and suddenly *"look it does not work..."* – Roko C. Buljan Jan 14 '14 at 02:21
  • Change `$("#dane_index" + i)` to `$("#img_container" + i)`. – voodoo417 Jan 14 '14 at 02:22

1 Answers1

3

Why not:

$( ".count" ).hover(
     function() {
          $( this ).find( ".text" ).show();
     }, function() {
          $( this ).find( ".text" ).hide();
     }
);
Felix
  • 37,892
  • 8
  • 43
  • 55