我试图将黑色文本悬停在 ul 中的 imgs 上的白色透明胶片上，但我认为透明度隐藏在 img 后面。我正在使用 Corey Schires 的 hover_caption jquery 插件。这是我的代码的链接。
http://blooming-citadel-2598.herokuapp.com/Residential/
和 jquery 库 https://github.com/coryschires/hover-caption
(function($) {
$.hover_caption = {
defaults: {
caption_font_size: '13px',
caption_color: 'black',
caption_bold: false,
caption_default: "fix me"
}
}
$.fn.extend({
hover_caption: function(config) {
var config = $.extend({}, $.hover_caption.defaults, config);
return this.each(function() {
var image = $(this);
// set variable for wrapper div
var width = image.width();
var height = image.height();
// variables for caption
var caption_padding = width * .07; // dynamic margin depending on img width
// set caption to title attr if set
var caption = image.attr('title') ? image.attr('title') : config.caption_default;
// add necessary html and css
image
.css({
'z-index': '0',
'position': 'relative'
})
.wrap('<div>')
.parent()
.css({
'width': width,
'height': height
})
.prepend('<h3>'+ caption +'</h3>')
.find('h3')
.addClass('hover_caption_caption') // use this hook for additional styling
.css({
'padding': caption_padding,
'color': config.caption_color,
'width': width,
'font-size': config.caption_font_size,
'position': 'absolute',
'margin': 0
})
.hide();
if (config.caption_bold) { image.css('font-weight', 'bold') };
// add hover event to toggle message
image.parent().hover(function() {
$(this).addClass('hover_caption').find('h3').show();
}, function() {
$(this).removeClass('hover_caption').find('h3').hide();
});
})
}
})
})(jQuery);
他在他的 jquery 中将 img 的 z-index 设置为 -1，我不得不将其更改为 0，这样图像就不会隐藏在他们的父母之下。这也打破了一切。图像嵌套在父悬停元素 div.hover_caption
div.hover_caption {
background-image: url(/img/hover_image_white.gif);
background-color: rgb(255,255,255, 0.8);
z-index: 1000!important;
float:left;
}