在IE 9之前不工作的Javascript/jquery代碼。在FF，Chrome，Safari中工作正常

此代碼適用於FF，Safari，Chrome和IE9，但在9之前的IE中不能正常工作。圖像淡入淡出，但是當我嘗試更改代碼懸停部分的文本顏色時，它不起作用。它讓我相信這是代碼的.attr部分的問題？在IE 9之前不工作的Javascript/jquery代碼。在FF，Chrome，Safari中工作正常

我相信有更好的方法來做到這一點，所以任何幫助將不勝感激。

編輯：當我將鼠標放在圖像上時，第二個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>

來源

2012-05-23 josh

問題可能是您對ID的非身份使用。該ID在整個文檔中必須是唯一的，但您對圖像和列表條目使用相同的ID（a，b，c ...）。

嘗試更改列表中的元素的ID架構（如爲「<li id="textboxa">」，「textboxb」 ......，改變你的JavaScript相應：

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

來源

2012-05-23 17:26:15 Lukx

既然你沒有指定實際的問題，我會在你發現了什麼猜測是不是加工。

IE8-不支持不透明度。有解決方法，例如使用filter，但我希望fadeTo不像不透明一樣容易地處理過濾器。

來源

2012-05-23 17:11:47

我編輯的問題，使我的問題更加清楚一點 – josh

我可以找出什麼可以您的具體問題，但我想，別人說這來自於不透明度的能力。

作爲替代不透明我做了這個給你檢查一下。就這麼複製fadeIn()和jQuery的一個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 */ 
}

來源

2012-05-23 17:28:30

在IE 9之前不工作的Javascript/jquery代碼。在FF，Chrome，Safari中工作正常

回答

相關問題