Question

好的我正在使用一个叫做Captify的javascript。它为您添加了一个小的弹出图像，文本输入。在所有浏览器中都可以使用IE9。 IE9淡出弹出div中的所有内容。我已经阅读了它的子元素问题，但我无法解决它。由于无法在网上任何地方找到captify，我将包含所有代码以及下面的css以及我页面上的代码。如果有人能帮我阻止褪色，我会非常感激，因为它给我带来了重大问题。

爪哇

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

现在用于上映的CSS

/* 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

#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 IE，则可以定义背景以仅将IE用于IE。我认为这将为您节省大量时间来解决这个问题

编辑：当然不要忘记在IE css

中将不透明度设置为1

Answer 2

我知道这个问题已经过时了，但有人可能觉得这个问题很有用：

我在我的页面中这样做了;

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

在样式表中我把它;

.caption-text{position:absolute;}

Answer 3

@Mark King，

感谢它对我有用

但我改为绝对改为亲戚。

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

IE 9对子元素具有不透明性，我无法使用captify来阻止它

3 个答案: