Question

我使用了以下脚本来显示图像，它似乎工作正常;但是在Internet Explorer中，文本并没有消失。有什么想法吗？

 <td colspan="5" ID='links'>
<ul id="navlist">
    <li id="active"><a href="#" id="a" onmouseover="over(this)" onmouseout="out()">Apie įmonę</a>|</li>
    <li><a href="#" ID="b" onmouseover="over(this)" onmouseout="out()">Naujienos</a>|</li>
    <li><a href="#" ID="c" onmouseover="over(this)" onmouseout="out()">Kainynai</a>|</li>
    <li><a href="#" ID="d" onmouseover="over(this)" onmouseout="out()">Aktyvaus laisvalaikio priemonės</a>|</li>
    <li><a href="#" ID="e" onmouseover="over(this)" onmouseout="out()">Servisas</a>|</li>
    <li><a href="#" ID="f" onmouseover="over(this)" onmouseout="out()">Akcijos</a>|</li>
    <li><a href="#" ID="g" onmouseover="over(this)" onmouseout="out()">Karjera</a>|</li>
    <li><a href="#" ID="h" onmouseover="over(this)" onmouseout="out()">Galerija</a>|</li>
    <li><a href="#" ID="i" onmouseover="over(this)" onmouseout="out()">Naudota technika</a></li>
</ul>
</td>
<script>
var ba = new Array("a","b","c","d","e","f","g","h","i");


function over(from){
var value = 5; 

for(i=0;i<ba.length;i++){

    if(from.id==ba[i])
    {
        //do nothing
    }
    else{
        document.getElementById(ba[i]).style.MozOpacity = value/10;
        document.getElementById(ba[i]).style.opacity = value/10;
        document.getElementById(ba[i]).style.filter = 'alpha(opacity=' + value*10 + ')';

    }
}
}
function out(){
var value = 10;

for(i=0;i<ba.length;i++){

document.getElementById(ba[i]).style.MozOpacity = value/10;
document.getElementById(ba[i]).style.opacity = value/10;
document.getElementById(ba[i]).style.filter = 'alpha(opacity=' + value*10 + ')';
}

}
</script>

谢谢！

Answer 1

检查出来：http://www.quirksmode.org/css/opacity.html

重要的部分：“IE8使用新的表示法：-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";”

此外，Internet Explorer（6和8）似乎认为该元素必须具有width显式设置，然后才能透明。奇怪的。上面的链接用CSS设置宽度，但没有提到这个奇怪的要求。

（虽然你没有特别询问它，但我建议你使用jQuery来完成这类任务 - 它可以让这些效果更容易使用，例如参见：http://api.jquery.com/fadeTo/）

Answer 2

我建议创建一个类定义来设置元素的不透明度。然后，在你的javascript中，你只需要写：

document.getElementById(ba[i]).className = "opacityClassName".

在CSS中，您的opacityClassName样式定义可能如下所示：

.opacityClassName {
    filter: alpha(opacity:0.5);
    KHTMLOpacity: 0.5;
    MozOpacity: 0.5;
    -khtml-opacity:.50;
    -ms-filter:"alpha(opacity=50)";
    -moz-opacity:.50;
    filter:alpha(opacity=50);
    opacity:.50;
}

通过这种方式，您不必担心语法如下：

document.getElementById(ba[i]).style.ms-filter

不能正常工作。

Answer 3

使用jQuery。我知道这是陈词滥调的答案，但在这种情况下，它就是现场：它会自动处理浏览器怪癖。

观察示例：

<table>
<tr>
<td colspan="5" ID='links'>
<ul id="navlist">
    <li id="active"><a href="#" id="a">Apie įmonę</a>|</li>
    <li><a href="#" ID="b">Naujienos</a>|</li>
    <li><a href="#" ID="c">Kainynai</a>|</li>
    <li><a href="#" ID="d">Aktyvaus laisvalaikio priemonės</a>|</li>
    <li><a href="#" ID="e">Servisas</a>|</li>
    <li><a href="#" ID="f">Akcijos</a>|</li>
    <li><a href="#" ID="g">Karjera</a>|</li>
    <li><a href="#" ID="h">Galerija</a>|</li>
    <li><a href="#" ID="i">Naudota technika</a></li>
</ul>
</td>
</tr>
</table>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script><!-- load jQuery -->
<script>
// run when the document is loaded
$(document).ready(function(){

    // give each link under #navlist opacity, unless cursor is over it
    $('#navlist a').mouseover(function(){
        var current = this;
            // run the following for each matching element
        $('#navlist a').each(function(index,element){
            if (element != current) {
                // handles browser quirks for us
                    $(element).css('opacity',0.5);
            }
        });
    });

    // remove the opacity
    $('#navlist a').mouseout(function(event){
        $('#navlist a').each(function(index,element){
            $(element).css('opacity',1);
        });
    });
});

</script>

使用跨浏览器（Opera，Chromium，Midori，Firefox，IE6 和 IE8），用更少的代码完成工作。花费的时间：15分钟。

JavaScript：不透明度适用于歌剧但不适用于IE

3 个答案: