IE 9は子要素で不透明であり、キャプチャを使用して停止できません。

Question

いいえ私はCaptifyというJavaScriptを使用しています。それはあなたのための画像に小さなポップアップを追加します。すべてのブラウザで素晴らしい動作はIE9を受け入れます。 IE9はポップアップdiv内のすべてをフェードアウトします。私はその子要素の問題を読んだが、私はそれを修正することはできません。キャプチャはもうどこにもオンラインでは見つかりませんから、私はそのコードを自分のページのコードと一緒にして、そのコードの下に追加します。もし誰かが私がフェードを止めるのを助けることができたら、それは私に大きな問題を与えてくれたので、とても感謝しています。

jQuery.fn.extend({ 
captify: function(o){ 
    var o = $.extend({ 
     speedOver: 'fast',  // speed of the mouseover effect 
     speedOut: 'normal',  // speed of the mouseout effect 
     hideDelay: 500,   // how long to delay the hiding of the caption after mouseout (ms) 
     animation: 'fade',  // 'fade' or 'slide' 
     prefix: '',    // text/html to be placed at the beginning of every caption 
     className: 'caption' // the name of the CSS class to apply to the caption box 
    }, o); 
    $(this).each(function(){ 
     var img = this; 
     $(this).load(function(){ 
      $this = img; 
      if (this.hasInit){ 
       return false; 
      } 
      this.hasInit = true; 
      var over_caption = false; 
      var over_img  = false; 
      //pull the label from another element if there if there is a 
      //valid element id inside the rel="..." attribute, otherwise, 
      //just use the text in the title="..." attribute. 
      var captionLabelSrc = $('#' + $(this).attr('rel')); 
      var captionLabelTitle = !captionLabelSrc.length ? $(this).attr('title') : captionLabelSrc.html(); 
      var captionLabelHTML = !captionLabelTitle.length ? $(this).attr('alt') : captionLabelTitle; 
      captionLabelSrc.remove(); 
      var toWrap = this.parent && this.parent.tagName == 'a' ? this.parent : $(this); 
      var wrapper = toWrap.wrap('<div></div>').parent(); 
      wrapper.css({ 
       overflow: 'hidden', 
       padding: 0, 
       fontSize: 0.1 
      }) 
      wrapper.addClass('caption-wrapper'); 
      wrapper.width($(this).width()); 
      wrapper.height($(this).height()); 
      //transfer the border properties from the image to the wrapper 
      $.map(['top','right','bottom','left'], function(i){ 
       $.map(['style','width','color'], function(j){ 
        var key = 'border-'+i+'-'+j; 
        wrapper.css(key, $(img).css(key)); 
       }); 
      }); 
      $(img).css({border: '0 none'}); 
      //transfer the margin properties 
      $.map(['top','right','bottom','left'], function(t){ 
       var key = 'margin-'+t; 
       wrapper.css(key, $(img).css(key)); 
      }); 

      //create two consecutive divs, one for the semi-transparent background, 
      //and other other for the fully-opaque label 
      var caption   = $('div:last', wrapper.append('<div></div>')).addClass(o.className); 
      var captionContent = $('div:last', wrapper.append('<div></div>')).addClass(o.className).append(o.prefix).append(captionLabelHTML); 

      //override hiding from CSS, and reset all margins (which could have been inherited) 
      $('*',wrapper).css({margin: 0}).show(); 
      //ensure the background is on bottom 
      var captionPositioning = jQuery.browser.msie ? 'static' : 'relative'; 
      caption.css({ 
       zIndex: 1, 
       position: captionPositioning 
      }); 

      //clear the backgrounds/borders from the label, and make it fully-opaque 
      captionContent.css({ 
       position: captionPositioning, 
       zIndex: 2, 
       background: 'none', 
       border: '0 none', 
       opacity: 1.0 
      }); 
      caption.width(captionContent.outerWidth()); 
      caption.height(captionContent.outerHeight()); 

      //pull the label up on top of the background 
      captionContent.css({ 'marginTop': -caption.outerHeight() }); 
      //function to push the caption out of view 
      var cHide = function(){ 
       if (!over_caption && !over_img) 
        caption.animate({ marginTop: 0 }, o.speedOut); 
      }; 
      //when the mouse is over the image 
      $(this).hover(
       function(){ 
        over_img = true; 
        if (!over_caption) { 
         caption.animate({ 
          marginTop: -caption.height() 
         }, o.speedOver); 
        } 
       }, 
       function(){ 
        over_img = false; 
        window.setTimeout(cHide, o.hideDelay); 
       } 
      ); 

      //when the mouse is over the caption on top of the image (the caption is a sibling of the image) 
      $('div', wrapper).hover(
       function(){ over_caption = true; }, 
       function(){ over_caption = false; window.setTimeout(cHide, o.hideDelay); } 
      ); 
     }); 
     //if the image has already loaded (due to being cached), force the load function to be called 
     if (this.complete || this.naturalWidth > 0){ 
      $(img).trigger('load'); 
     } 
    }); 
} 
}); 

今すぐ今captify

/* caption styling */ 

.caption { 
color: #ffffff; 
padding: 0.6em; 
font-size: 10px; 
display: none; 
cursor: default; 
/* remove these 4 lines below if you want 
the caption to span the whole width of the 
image 
width: 82%; 
/*border-top: 1px solid #303030; 
border-right: 1px solid #303030;*/ 

/* background/transparency */ 
background: #000000; 
opacity: 0.7; 
filter: alpha(opacity=70); 
-moz-opacity: 0.7; 
-khtml-opacity: 0.7; 
margin-bottom: 5px; 
} 

.caption a { 
border: 0 none; 
text-decoration: none; 
background: #000000; 
padding: 0.3em; 
color:#FFFF00; 
} 

.caption a:hover { 

text-decoration:underline; 
} 

.caption-wrapper { 
float: left; 
} 

br.c { clear: both; } 

私のページ

<link href="/js/captify/sample.css" rel="stylesheet" type="text/css" /><script  type="text/javascript" src="/js/captify/captify.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('img.captify').captify({ 
    // all of these options are... optional 
    // --- 
    // speed of the mouseover effect 
    speedOver: 150, 
    // speed of the mouseout effect 
    speedOut: 200, 
    // how long to delay the hiding of the caption after mouseout (ms) 
    hideDelay: 100, 
    // 'fade' or 'slide' 
    animation: 'fade',  
    // text/html to be placed at the beginning of every caption 
    prefix: '', 
    // the name of the CSS class to apply to the caption box 
    className: 'caption' 
}); 
}); 
</script> 

    <div id="services"> 

    <ul > 

    <li > 

     <img src="/images/sports.png" width="169" height="121" class="captify" rel="caption1" /> 
       <div id="caption1"><h4>Watersports</h4> 
<p>View all the sports we offer on the lakeside.</p></div> 

    </li></ul></div> 

と余分なCSSのCSSは、私が使用するJava

#services { 
width: 570px; 
margin-top: 370px; 
height: 130px; 
} 
#services ul li { 
float: left; 
height: 128px; 
width: 184px; 
margin-right: 5px; 
} 

Answer 1

IEの不透明処理がうまくいっているので、私は皆一緒に捨てることをお勧めします。背景については、透明なpng（1x1の繰り返し）を使用して同じ効果を得ることができます。 IEのみのCSSを使用している場合、IEのためだけにpngを使用するように背景を定義することができます。私がこの問題を越え

編集を取得しようとしているあなたに多くの時間を節約すると思います。もちろん

Answer 2

が、私はこの質問は古いですが、誰かがこれを見つけるかもしれない知っているIEのCSSのいずれかに不透明度を設定することを忘れないでください便利：

私はこれを私のページで行いました。

$('img.captify').captify({ 
    animation: 'always-on',  
    opacity: '0.7' 
}); 
$('div.caption-bottom').wrapInner('<span class="caption-text"></span>'); 

そして私はこれを置いています。

.caption-text{position:absolute;} 

Answer 3

@マークキング、それは私

しかし、私ではなく、相対的に絶対的な変更のために働く

感謝。

.caption-text{ 
    display:block; 
    position:relative; 
}