在 IE 9 之前无法运行的 Javascript/jquery 代码。在 FF、Chrome、Safari 中运行良好答案

【问题标题】：Javascript/jquery code that doesn't work prior to IE 9. Works fine in FF, Chrome, Safari在 IE 9 之前无法运行的 Javascript/jquery 代码。在 FF、Chrome、Safari 中运行良好
【发布时间】：2012-05-24 05:08:05
【问题描述】：

此代码适用于 FF、Safari、Chrome 和 IE9，但在 9 之前的 IE 中无法 100% 运行。图像的淡入淡出有效，但是当我尝试更改悬停部分的文本颜色时它不起作用的代码。这让我相信代码的 .attr 部分有问题？

我确信有更好的方法可以做到这一点，因此我们将不胜感激。

编辑：当我将鼠标悬停在图像上时，第二个 div 中的文本应该会改变颜色。然后当我将鼠标移出时，文本颜色应该会再次改变。

这是我的 javascript 代码：

<script>
$(document).ready(function(){
$("#boxes li img").fadeTo("fast", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$("#text-boxes li").css("color","#f2f2f4");

$("#boxes li img").hover(function(){
$(this).fadeTo("fast", 1.0); // This should set the opacity to 100% on hover
var id = $(this).attr("id");
$("#text-boxes li#"+id).css("color","#333333");

},function(){
$(this).fadeTo("fast", 0.6); // This should set the opacity back to 60% on mouseout
$("#text-boxes li").css("color","#f2f2f4");
});
});
</script>

这是我的html代码：

<img src="images/where.png" alt="where would you like to visit first?" /><br>
    <ul id="boxes">
        <li><a href="#"><img id="a" src="images/mom-stories.jpg" /></a></li>
        <li><a href="#"><img id="b" src="images/mom-stories.jpg" /></a></li>
        <li><a href="#"><img id="c" src="images/mom-stories.jpg" /></a></li>
        <li><a href="#"><img id="d" src="images/mom-stories.jpg" /></a></li>
        <li><a href="#"><img id="e" src="images/mom-stories.jpg" /></a></li>
        <li><a href="#"><img id="f" src="images/mom-stories.jpg" /></a></li>
    </ul>

<div style="width:100%;height:80px;background:#f2f2f4;overflow:auto;">
    <ul id="text-boxes" style="padding-top:15px;">
        <li id="a" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
        <li id="b" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
        <li id="c" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
        <li id="d" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
        <li id="e" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
        <li id="f" style="width:147px;text-align:center;">Real mom's sharing<br>real experiences<br>in parenting</li>
    </ul>
</div>

【问题讨论】：

标签： javascript jquery internet-explorer

【解决方案1】：

问题可能是您对 ID 的非身份使用。 ID 在整个文档中必须是唯一的，但您对图像和列表条目使用相同的 ID（a、b、c...）。

尝试更改列表元素中的 ID 架构（例如，更改为“<li id="textboxa">”、“textboxb”...并相应地更改您的 JavaScript：

// in the first hover function
$("#textbox"+id).css("color","#333333");

【讨论】：

【解决方案2】：

由于您没有指定实际问题，我将不得不猜测您发现的问题是什么。

IE8- 不支持不透明度。有一些变通方法，例如使用filter，但我希望fadeTo 不像不透明度那样容易处理过滤器

【讨论】：

【解决方案3】：

我可以弄清楚您的确切问题是什么，但我认为它来自其他人所说的不透明能力。

作为不透明度的替代方法，我制作了这个供您检查。这是一个从 jQuery 复制 fadeIn() 和 fadeOut() 的 CSS。

现场演示： http://jsfiddle.net/oscarj24/2mVXL/1/

CSS：

.fadeIn {  
    opacity: 0; /* FX, Safari, GC, Opera, decent browsers */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
    filter: alpha(opacity=0); /* IE */
    /* in Safari, FX and Chrome add a fade transition */
    -webkit-transition: opacity .25s linear .1s;
    transition: opacity .25s linear .1s;  
}

.fadeOut { 
    opacity: 1; /* FX, Safari, GC, Opera, decent browsers */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
    filter: alpha(opacity=100); /* IE */
}

【讨论】：