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/