我正在尝试使用 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;
}
最佳答案
z-index
没有 position
是没有意义的,所以尝试在图片及其容器和 上设置
是容器。此外,请务必对所有这些设置 position:relative
pz-index
。
关于jquery - jQuery slidein 背景问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5839056/