我正在尝试将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/

10-09 18:24
查看更多