Question

这个代码对FF、Safari、Chrome和IE9有效,但在9点前IE没有100%有效,但图像的淡化作用,但当我试图改变代码中悬浮部分的文字颜色时,它不起作用。它让我相信代码的.attr部分有问题吗?

我肯定有更好的办法这样做,因此任何帮助都会受到欢迎。

< 加强 > EDIT : 当我在图像上鼠标时, 第二个 div 中的文本应该更改颜色。当我鼠标退出文本颜色时, 文本颜色应该再次更改。

这是我的笔记本代码:

<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 方案( 如“ code_ lt; li =“ textboxa” & gt; , textboxb ), 并相应修改 JavaScript :



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

Answer 2

既然你没有具体说明实际问题,我不得不猜测你发现什么没有用。

IE8- 不支持不透明。周围有工作, 例如使用 < a href=" http:// joseph. randomnetworks.com/2006/ 08/16/ cs- opacity- in- internet- explorer- ie/ " rel=" nofollow" > filter , 但我期望淡化不会像不透明一样容易处理过滤

Answer 3


我可以弄清楚你到底有什么问题 但我想这是来自不透明的能力 正如其他人所说

作为不透明度的替代方法,我为您选择了这个选项。它是一个 CSS, 复制jQuery 的 < code> fadeIn () 和 fadeOut () 。

<强力 > 实况演示: http://jsfidd.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 */
}

友情链接