IE 9对子元素具有不透明性，我无法使用captify来阻止它 [英] IE 9 has opacity on a child element and I cant stop it using captify
本文介绍了IE 9对子元素具有不透明性，我无法使用captify来阻止它的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Java
< pre $
jQuery.fn.extend（{
captify：function（o）{
var o = $ .extend（{
speedOver：'fast' ，//鼠标悬停效果的速度
speedOut：'normal'，//鼠标悬停效果的速度
hideDelay：500，//在鼠标悬停后延迟标题的隐藏时间（ms）
动画：'fade'，//'fade'或'slide'
前缀：''，// text / html被放置在每个标题的开头
className：'caption' //要应用于标题框的CSS类的名称
}，o）;
$（this）.each（function（）{
var img = this;
$（this）.load（function（）{
$ this = img;
if（this.hasInit）{
return false;
}
th is.hasInit = true;
var over_caption = false;
var over_img = false;
//从另一个元素中拉取标签，如果在rel =...属性中存在
//有效元素id，则
//只是使用文本在title =...属性中。
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（））;
//将边界属性从图像传递到包装
$ .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'}）;
//转移保证金属性
$ .map（['top'，'right'，'bottom'，'left']，function（t）{
var key ='margin - '+ t;
wrapper.css（key，$（img）.css（key））;
}）;
//创建两个连续的div，一个用于半透明背景，
//以及其他用于完全不透明的标签
var caption = $（'div：最后'，wrapper.append（'< div>< / div>））。addClass（o.className）;
var captionContent = $（'div：last'，wrapper.append（'< div>< / div>））.addClass（o.className）.append（o.prefix）.append（captionLabelHTML ）;
//覆盖从CSS隐藏，并重置所有边距（可能已被继承）
$（'*'，包装器）.css（{margin：0}）。show ）;
//确保背景位于底部
var captionPositioning = jQuery.browser.msie？ '静态'：'相对';
caption.css（{
zIndex：1，
position：captionPositioning
}）;
//从标签中清除背景/边框，并使其完全不透明
captionContent.css（{
位置：captionPositioning，
zIndex：2，
background：'none'，
border：'0 none'，
opacity：1.0
}）;
caption.width（captionContent.outerWidth（））;
caption.height（captionContent.outerHeight（））;
//将标签拉到背景之上
captionContent.css（{'marginTop'：-caption.outerHeight（）}）;
//将标题推出视图
var cHide = function（）{
if（！over_caption&&！over_img）
caption.animate（{marginTop ：0}，o.speedOut）;
};
//当鼠标悬停在图像上时
$（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）;
}
）;
//当鼠标悬停在图像顶部的标题上时（标题是图像的同级）
$（'div'，wrapper）.hover（
function（）{over_caption = true;}，
function（）{over_caption = false; window.setTimeout（cHide，o.hideDelay）;}
）;
}）;
//如果图像已经加载（由于被缓存），强制加载函数被称为
if（this.complete || this.naturalWidth> 0）{
$ （IMG）.trigger（ '负载'）;
}
}）;
}
}）;
现在用于captify的CSS
<$ p $
/ *标题样式* /
。标题填充：0.6em;
font-size：10px;
display：none;
cursor：default;
/ *如果您希望
的标题横跨
图片的整个宽度，则删除下面的这4行：
width：82％;
/ * border-top：1px solid＃303030;
border-right：1px solid＃303030; * /
/ * background / transparency * /
background：＃000000;
不透明度：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;
背景：＃000000;
填充：0.3em;
颜色：＃FFFF00;
}
.caption a：hover {
text-decoration：underline;
}
.caption-wrapper {
float：left;
}
br.c {clear：both; }
现在我的信息页
< link href =/ js / captify / sample.css =stylesheettype =text / css/>< script type =text / javascriptsrc = /js/captify/captify.js\"></script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'img.captify'）。captify（{
//所有这些选项都是...可选
// ---
//鼠标悬停效果的速度
speedOver：150，
// mouseout效果的速度
speedOut：200，
//如何（ms）
hideDelay：100，
//'fade'或'slide'
动画：'fade'，
//延长隐藏时间text / html被放置在每个标题的开始处
前缀：''，
//用于标题框的CSS类的名称
className：'caption'
}）;
}）;
< / script>
< div id =services>
< ul>
< li>
< div id =caption1>< h4> Watersports< / h4>
< p>查看我们在湖畔提供的所有运动。< / 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;
$ / code $ / pre
解决方案建议你把所有的东西放在一起。对于背景，您可以使用透明png（1x1重复）来获得相同的效果。或者，如果您仅使用IE浏览器，则可以定义背景以仅使用IE浏览器的PNG。我认为这会为你节省很多时间来解决这个问题。编辑：当然不要忘记在IE浏览器中设置不透明度为1。
Ok I am using a piece of javascript called Captify. It adds a small pop up to images for you with text in. Works great in all browsers accept IE9. IE9 fades everything within the popup div. I have read its a child element issue but I can not fix it. As captify can not be found anywhere online any more I will include all the code for that along with the css below then the code on my page. If anyone could help me stop the fade I would be very grateful as it has coursed me major problems.
Java
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');
}
});
}
});
Now the CSS for 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; }
now my page
<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>
and the extra css i use
#services {
width: 570px;
margin-top: 370px;
height: 130px;
}
#services ul li {
float: left;
height: 128px;
width: 184px;
margin-right: 5px;
}
解决方案 Since IE opacity handling sucks I suggest you ditch all together. For the background, you can use a transparent png(1x1 repeating) to get the same effect. Or if you are using IE only css, you can define the background to use the png for IE only. I think this will save you lots of time trying to get across this issue
Edit: of course do not forget to set opacity to one in the IE css
这篇关于IE 9对子元素具有不透明性，我无法使用captify来阻止它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
