Javascript JQuery SlideUp-图像后面的背景色

我正在使用JQuery slideUp/slideDown向图像添加一个覆盖，该覆盖在鼠标悬停之前一直隐藏，然后从图像底部向上滑动

向上滑动的div被赋予了背景色，但它不会显示在图像上方，而是显示在图像后面（文本显示在图像顶部，但由于我设置了边距，我只能看到div背景色的下边缘）。Z索引已设置为100

有什么想法吗？谢谢

（函数（$）{
$（文档）.ready（函数（）{
$（“.slider”）.attr（“样式”，“显示：无；”）；
如果（$（“.slider”））{
$（'.image'）.mouseover（函数（）{
$（this.find（“.slider”）.slideDown（“400”）；
}).mouseout（函数（）{
$（this.find（“.slider”）.slideUp（“400”）；
});
}
});
}（jQuery））
.image{
高度：300px；
宽度：300px；
背景：#000000；
}
.滑块{
背景色：#333333！重要；
背景：#333333！重要；
背景位置：0%100%；
颜色：#ffffff；
利润率：-90px 0；
高度：90px；
宽度：100%；
z指数：100！重要；
}

标题
正文
z-index仅适用于定位元素（位置：绝对、位置：相对或位置：固定）

若不定义位置，元素将是静态的，因为这是块元素的默认位置

M.
z索引仅对定位元素有效（位置：绝对、位置：相对或位置：固定）

若不定义位置，元素将是静态的，因为这是块元素的默认位置

M.
最好定义
显示：无。
另外，将
mouseenter
和
mouseleave
绑定到
container
将防止鼠标离开图像并在滑块上移动时跳过
slider


$（'.container'）。在（“mouseenter”，function（）上{
$（“.slider”）.slideDown（）；
});
$（'.container'）。on（“mouseleave”，function（）{
$（“.slider”）.slideUp（“400”）；
});
.container{
宽度：300px；
}
.形象{
高度：300px；
宽度：300px；
背景：#000000；
}
.滑块{
背景色：#333333；
颜色：#ffffff；
利润率：-90px 0；
高度：90px；
宽度：100%；
显示：无；
}

标题
正文
最好定义
显示：无。
另外，将
mouseenter
和
mouseleave
绑定到
container
将防止鼠标离开图像并在滑块上移动时跳过
slider


$（'.container'）。在（“mouseenter”，function（）上{
$（“.slider”）.slideDown（）；
});
$（'.container'）。on（“mouseleave”，function（）{
$（“.slider”）.slideUp（“400”）；
});
.container{
宽度：300px；
}
.形象{
高度：300px；
宽度：300px；
背景：#000000；
}
.滑块{
背景色：#333333；
颜色：#ffffff；
利润率：-90px 0；
高度：90px；
宽度：100%；
显示：无；
}

标题
正文
您的jQuery选择器不正确。您应该使用
$（this.parent（）.find（“.slider”）.slideDown（“400”）相反，因为在
$（此）
容器内没有
.slider
，在本例中为
.image
。但是如果你将鼠标悬停在滑块上，它就会消失。我不确定这是不是你想要的行为。。。可能最好将
mouseover
/
mouseout
事件绑定到容器。jQuery选择器不正确。您应该使用
$（this.parent（）.find（“.slider”）.slideDown（“400”）相反，因为在
$（此）
容器内没有
.slider
，在本例中为
.image
。但是如果你将鼠标悬停在滑块上，它就会消失。我不确定这是不是你想要的行为。。。可能最好将
mouseover
/
mouseout
事件绑定到容器。感谢您的帮助，Banzay。这和马可的建议，使该职位相对成功。谢谢你的帮助，班扎。这一点，加上马可的建议，使该职位相对成功。谢谢马尔科。这有助于背景显示在图像上方。谢谢Marko。这有助于使背景显示在图像上方。