Jquery悬停标题插件隐藏透明度，是z索引吗

在ul中，我试图在img上的白色透明胶片上覆盖黑色文本，但我认为透明度隐藏在img后面。我正在使用Corey Schires的hover_字幕jquery插件。 这是我代码的链接

和jquery库

---

您的div中的img标签在逻辑上被放置在div的背景之上。使用z-index无法改变这种行为。例如，您可以将

opacity:0.4

添加到

div.hover\u caption img

。这将使您的图像透明，这样您的div上的背景就会显示出来。

谢谢！工作得很漂亮。

(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);

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;
}