带有标题的jQuery悬停覆盖

Question

我想在我的作品集上实现带有标题的悬停叠加效果。 我正在使用基本的 nav ul li a img 列出我的工作，当将鼠标悬停在特定参考（带链接的图像）上时，我只想要一个带有一些白色文本的黑色叠加层

到目前为止，我已经得到了这个，但它显然破坏了我的链接，所以它只是一个简单的悬停覆盖，我似乎无法正确集成标题。此外，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>

当我将鼠标悬停在参考上时，黑色叠加层会出现标题，我可以单击图片转到特定参考。

Answer 1

这是一个开始 - 我放弃了覆盖 div 以支持覆盖文本位，并淡化图像本身。只要背景是深色/黑色，它看起来都一样。

http://jsfiddle.net/g6xVR/1/

Answer 2

如果您使用 a 而不是 a ，您可以在标签内插入标签，这不会破坏您的链接。只需将 span css 设置为“display: block”

如果可能，我建议在您的标记中写出标题，然后通过 CSS 隐藏它们，直到鼠标悬停。它比在每次鼠标悬停时创建和删除 DOM 元素要快。

Answer 3

试试这个：jsfiddle

这使用标题属性显示在叠加层中。图像路径不是完整路径，因此小提琴不会显示您的图像（因此它并不完美），但您明白了。