好的，我正在使用一段名为 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');
}
});
}
});
现在用于 captify 的 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;
}