ulのimgの上の白い透明度に黒いテキストを重ねてホバーしようとしていますが、透明度がimgの後ろに隠れていると思います。CoreySchiresのhover_captionjqueryプラグインを使用しています。これが私のコードへのリンクです。
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;
}