Question

我正在尝试使用jQuery添加一些幻灯片进/出描述到图像here。当我将其应用到我的网站时，文本（在<p>中）按预期滑入，但由于某种原因，文本的背景显示在图片下方。我玩z-order没有效果。到目前为止，我还没有能够通过一个简单的例子来区分它，但我希望这是一个常见的问题...

$(document).ready(function() {

    $(".product-image").fadeIn("slow");  

    $(function(){  
        $('.productInfo').showFeatureText();    
    })

$.fn.showFeatureText = function() {
    return this.each(function(){    
    var box = $(this);
    var text = $('p',this);            

    box.hover(
        function(){
            text.slideDown("fast");
            text.css('z-index', '1000');    
        },
        function(){
            text.slideUp("fast");
        }
    );

  });
}

});

.product {
    float: left;
    margin: 10px 12px;
    width: 215px;
}

    .product .productInfo {
        height: 250px;
        overflow: hidden;        

    }

        .product h3 {
            font-size: 1.75em;
            font-weight: normal;
            margin: 0 0 0px 0;
            padding: 0;
        }

        .product-image {
            background-color: #edece8;
            border: 1px #e6e3d8 solid;
            height: 200px;
            margin: 0 0 0px 0;
            padding: 6px;
            width: 200px;
            display:none;

        }

        .product p {
            margin: -75px 6px 6px 6px;
            display:none;
            background: #000000; url(/Images/feature_bg.png) repeat;
            overflow: hidden;
            height:65px;
            width:200px;
            z-index:1;
            overflow:hidden;
        }

Answer 1

如果没有z-index，

position毫无意义，请尝试在图片及其容器和position:relative及其容器上设置p。另外，请务必在所有这些上设置z-index。

Answer 2

嗨，亚当我做了一个应该适合你的例子，我希望这可以帮助你

http://jsfiddle.net/samccone/gKytu/

jQuery幻灯片在背景中的问题

2 个答案: