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