0

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

1 に答える 1

0

div内のimgタグは、論理的にdivの背景の上に配置されています。z-indexでその動作を変更することはできません。たとえば、に追加することができopacity: 0.4ますdiv.hover_caption img。これにより、画像が透明になり、divの背景が透けて見えるようになります。

于 2013-02-17T04:23:55.797 に答える