0

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

3 回答 3

4

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

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

// in the first hover function
$("#textbox"+id).css("color","#333333");
于 2012-05-23T17:26:15.367 回答
0

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

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

于 2012-05-23T17:11:47.707 回答
0

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

作为不透明度的替代方法，我制作了这个供您检查。这是一个复制fadeIn()和fadeOut()来自 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-23T17:28:30.327 回答