2

我想在我的投资组合上实现带有标题的悬停叠加效果。我正在使用基本的 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>

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

4

3 回答 3

1

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

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

于 2011-05-12T18:42:07.330 回答
0

试试这个：jsfiddle

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

于 2011-05-12T18:53:42.617 回答
0

如果您使用 a 而不是 a ，您可以在标签内插入标签，这不会破坏您的链接。只需将跨度 css 设置为“显示：块”

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

于 2011-05-12T16:12:51.910 回答