我正在尝试将ul上的img上的黑色透明胶片上的黑色文本悬停在ul上,但是我认为透明度隐藏在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;
}
最佳答案
您的div内的img标签在逻辑上被置于div的背景之上。您无法使用z-index更改该行为。例如,您可以将opacity: 0.4
添加到div.hover_caption img
。这将使您的图像透明,以便div上的背景显示出来。
关于jquery - jQuery hover_caption插件隐藏透明度,是否为z-index,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14917910/