Question

This code works fine for FF, Safari, Chrome and IE9, but doesn’t work 100% in IE prior to 9. The fade for the image works, but when I try to change the text color for the hover portion of the code it doesn’t work. It leads me to believe it is a problem the with the .attr part of the code?

I’m sure there is a better way to do this so any help would be appreciated.

EDIT: When I mouse over the image the text in the second div is supposed to change colors. Then when I mouse out the text color is supposed to change again.

Here is my javascript code:

<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>

Here is my html code:

<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

A problem might be your non-identity use of IDs. The ID must be unique throughout the document, but you are using the same IDs (a, b, c…) for both the images AND the list entries.

Try changing the ID schema in the list elements (e.g. to “<li id="textboxa">“, “textboxb“… and change your JavaScript accordingly:

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