Question

我想用我的投资组合上的标题实现悬停叠加效果。我正在使用基本的导航文件列出我的工作，当我将鼠标悬停在特定参考（带链接的图像）上时，我只想要一个带有白色文本的黑色叠加层

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

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

jquery悬停覆盖与标题

3 个答案: