0

このコードは、FF、Safari、Chrome、および IE9 では正常に動作しますが、9 より前の IE では 100% 動作しません。画像のフェードは機能しますが、コードのホバー部分のテキストの色を変更しようとすると、動作しません。コードの .attr 部分に問題があると思いますか?

これを行うためのより良い方法があると確信しているので、助けていただければ幸いです。

編集: 画像の上にマウスを置くと、2 番目の 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はドキュメント全体で一意である必要がありますが、画像とリストエントリの両方に同じ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

私はあなたの正確な問題が何であるかを理解することができますが、それは他の人が言ったように不透明度の能力から来ていると思います。

不透明度の代わりに、確認できるようにこれを作成しました。これは、jQueryからとfadeIn()を複製するCSSです。fadeOut()

ライブデモ： 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 に答える
0

あなたは実際の問題を特定していないので、何が機能していないのかを推測する必要があります。

IE8- は不透明度をサポートしていません。フィルターを使用するなどの回避策がありますが、fadeTo は opacity ほど簡単にフィルターを処理できないと思います

于 2012-05-23T17:11:47.707 に答える