JQuery Image Text/Caption Rollover

Question

Мне нужен этот опрос, чтобы отобразить текст, когда вы наведите курсор мыши на изображение. Я просмотрел несколько различных руководств, но я не могу найти много о добавлении текста/титров с помощью jQuery. Лоты с использованием CSS3, но ни с одним JQuery. Я попробовал следующее:

JQuery

//We are using $(window).load here because we want to wait until the images are loaded 
$(window).load(function(){ 
    //for each description div... 
    $('div.description').each(function(){ 
     //...set the opacity to 0... 
     $(this).css('opacity', 0); 
     //..set width same as the image... 
     $(this).css('width', $(this).siblings('img').width()); 
     //...get the parent (the wrapper) and set it's width same as the image width... ' 
     $(this).parent().css('width', $(this).siblings('img').width()); 
     //...set the display to block 
     $(this).css('display', 'block'); 
    }); 

    $('div.wrapper').hover(function(){ 
     //when mouse hover over the wrapper div 
     //get its children elements with class description ' 
     //and show it using fadeTo 
     $(this).children('.description').stop().fadeTo(500, 0.7); 
    },function(){ 
     //when mouse out of the wrapper div 
     //use fadeTo to hide the div 
     $(this).children('.description').stop().fadeTo(500, 0); 
    }); 

}); 

... со следующим HTML ...

HTML

<table id="intro"> 
    <tr> 
     <div class="wrapper"> 
      <td> 
       <a href="headwear.html"><img src="images/headwear.png" alt="headwear" /></a> 
       <div class="description"> 
        <div class="description_content"> 
         This is just a test. 
        </div> 
       </div> 
       <a href="apparel.html"><img src="images/apparel.png" alt="apparel" /></a> 
       <a href="accessories.html"><img src="images/accessories.png" alt="accessories" /></a> 
      </td> 
     </div> 
    </tr> 
</table> 

... и эти являются стилями ...

CSS

div.description{ 
    position: absolute; /* absolute position (so we can position it where we want)*/ 
    bottom: 0px; /* position will be on bottom */ 
    left: 0px; 
    display: none; /* hide it */ 
    /* styling below */ 
    background-color: black; 
    font-size: 15px; 
    color: white; 
} 
div.description_content{ 
    padding: 10px; 
} 

div.wrapper{ 
    position: relative; /* important(so we can absolutely position the description div */ 
} 
#intro { 
    text-align: left; 
    margin-right: 5px; 
    width: 1100px; 
} 
#intro img { 
    margin: 5px; 
} 

Fiddle

http://fiddle.jshell.net/yutikohercell/brxu8w8m/

Живая

http://jsfiddle.net/yutikohercell/brxu8w8m/embedded/result/

Answer 1

Попробуйте это. Также удалите display:none из css за div.description и добавьте opacity : 0. FadeTo изменяет только непрозрачность, не меняет отображение как block.

$('img').hover(function() { 
    $(this).closest('a').siblings('.description').fadeTo(500, 0.7); // finds the parent 'a' of the clicked element and then finds its sibling with the class 'description'. 
    }, function() { 
    $(this).closest('a').siblings('.description').fadeTo(500, 0); 
    }); 

http://fiddle.jshell.net/brxu8w8m/1/