jquery懸停覆蓋與標題

我想達到懸停覆蓋效果與我的投資組合標題。我正在使用基本導航菜單列出我的工作，並且我只是想在一個特定的參考上懸停時使用一些白色文本的黑色覆蓋圖（帶鏈接的圖像）jquery懸停覆蓋與標題

到目前爲止，這，但它顯然會擾亂我的鏈接，所以它只是一個簡單的懸停覆蓋，我似乎無法正確集成標題。此外，fadeIn轉換目前幾乎不存在。

THE HTML 

<section id="portfoliowrapper"> 
<nav> 
<ul class="colum3"> 
     <li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item" /></a></li> 
     <li><a href="portfolio_detail.aspx" title=""><img src="/images/businesscards_single_item.jpg" alt="businesscards_single_item" /></a></li> 
     <li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item" /></a></li> 

</ul> 
</nav><!-- //navcontainer --> 
</section><!-- //portfoliowrapper--> 

MY CSS 

#portfoliowrapper { float: left;} 
#portfoliowrapper nav .colum3 { float: left;} 
#portfoliowrapper nav .colum3 a img { } 
#portfoliowrapper nav .colum3 li {float: left;width: 253px;height: 220px;margin-right: 10px;margin-bottom: 10px; background: #555; } 
#portfoliowrapper nav .colum3 li:last-child { margin-right: 0px;} 

THE J 

<script> 
    $(document).ready(function() { 
    $('.colum3 li a').bind('mouseover', function() { 

     $(this).parent('li').css({ position: 'relative' }); 
     var img = $(this).children('img'); 
     $('<div />').text(' ').css({ 
      'height': img.height(), 
      'width': img.width(), 
      'background-color': '#000', 
      'position': 'absolute', 
      'top': 0, 
      'left': 0, 
      'opacity': 0.6 
     }).bind('mouseout', function() { 
      $(this).fadeOut('fast', function() { 
       $(this).remove(); 
      }); 
     }).insertAfter(this).animate({ 
      'opacity': 0.6 
     }, 'fast'); 

    }); 

}); 
</script>

當我將鼠標懸停在一個引用，黑色覆蓋自帶的字幕一起，我可以點擊圖片去具體的參考。

來源

2011-05-12 Jeppe Strøm

是這樣的嗎？ [http://thisdeveloperslife.com/](http://thisdeveloperslife.com/） – 2011-05-12 18:44:33