如何更改 IE 中图像的不透明度？ - jQuery、CSS

Question

以下内容适用于 FF、Chrome 和 Safari：

$('#delete_img').click(function(e) {
            var offset = $(this).offset();
            $(this).parent().parent().fadeTo("slow", 0.30);
            $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' });
            e.stopPropagation();
});

但不适用于 IE8（我什至没有在 7 及更早版本中进行测试）。

如何在 IE8 中实现此功能？

编辑：根据大众的要求，这里是 HTML：

<div id="slider-code">
        <a class="buttons prev" href="#"></a>
        <div class="viewport">
            <ul class="overview">           
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-bw.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>            
                <li><img src="images/red-stripe-dark.jpg" /></li>
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>
                <li><img src="images/red-stripe-dark.jpg" /></li>           
            </ul>       
        </div>
        <a class="buttons next" href="#"></a>
    </div>

    <div style="clear:both"></div>

    <div id="edit-image-nav">
        <div id="add_comment"><img src="images/comment-icon.png" /></div>
        <div id="like"><img src="images/paint-icon.png" /></div>
        <div id="delete_img"><img src="images/delete-icon.png" /></div>
    </div>  

请注意，当您单击“edit-image-nav”div 中的图标之一（覆盖在图像上）时，会发生什么情况？上面的 UL onHover），它具有不同的功能。对于其他图标，它有效。但对于 #delete_img 来说，却没有。

Answer 1

您的代码中似乎没有错误，但如果它确实不起作用，请尝试以下操作：

$('#delete_img').click(function(e) {
            var offset = $(this).offset();
            $(this).parent().parent().parent().children("img").fadeTo("slow", 0.30, function() {
                   $(this).css('opacity', 0.3);
            } );
            $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' });
            e.stopPropagation();
});

Answer 2

图像不能是父级（当然不太可能是），因此您的选择器是错误的。如果没有相关的 HTML 片段，很难说它应该是什么，但您可能想尝试一下（如果您的删除按钮距离要删除的目标低两级，这将起作用）：

$(this).parent().parent().find("img").fadeTo("slow", 0.30);

图像上的 fadeTo 方法在 IE8 上工作得很好。如果这不起作用，请发布您的 html。

否则，请确保您的 img 标签指定了高度和宽度，否则 IE 将不会对元素应用不透明度更改，因为它“没有布局” - 有关详细说明，请参阅 http://www.satzansatz.de/cssd/onhavinglayout.html。