0

我试图将黑色文本悬停在 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;
}
4

1 回答 1

0

div 中的 img 标签在逻辑上被放在 div 的背景之上。您无法使用 z-index 更改该行为。例如,您可以做的是添加opacity: 0.4div.hover_caption img. 这将使您的图像透明,以便您的 div 上的背景通过它显示。

于 2013-02-17T04:23:55.797 回答