Question

此代码适用于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>

Answer 1

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

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

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

Answer 2

由于您尚未指定实际问题，我将不得不猜测您发现的内容无效。

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

Answer 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 */
}

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

3 个答案: