JQuery图像文本/标题展开

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; 
} 

小提琴

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

直播

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

Answer 1

试试这个。同时从css中删除display:none代替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/