div内的图像褪色答案

【问题标题】：Fading image inside a divdiv内的图像褪色
【发布时间】：2009-06-24 14:41:46
【问题描述】：

我正在尝试获取它，所以当鼠标移到 div 上时它会淡化里面的图像

function clickimage($imageid){              
$("#image_"+imageid).hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){           
$(this).fadeTo("slow", 0.6);
});
}

<div id='images_$imageid'>
<a href='?tg=photos&photo=$imageid' onmouseover=\"javascript:clickimage('$imageid')\">
<img src='users/$ptgid/images/$iimg' width='100' height='100'/>
</a>
</div>

【问题讨论】：

那么你的问题是什么？

标签： javascript jquery

【解决方案1】：

您可能希望在文档加载时设置绑定，而不是每次鼠标悬停在图像上时。另外，我会创建一个类，以便您可以初始化每个项目上的悬停

$(document).ready(function() {
    $(".image-hover-class").hover(function(){
        $(this).find('img').fadeTo("slow", 1.0);
    },function(){           
        $(this).find('img').fadeTo("slow", 0.6);
    });
});

对于链接，您可以执行以下操作：

<a class="image-hover-class" href="?tg=photos&photo=$imageid" \>
    <img src='users/$ptgid/images/$iimg' width='100' height='100'/>
</a>

如果您想在div 上进行悬停，您可以这样做（但我建议在<a> 标签上进行悬停）：

$(document).ready(function() {
    $(".image-hover-class").hover(function(){
        $(this).find('a img').fadeTo("slow", 1.0);
    },function(){           
        $(this).find('a img').fadeTo("slow", 0.6);
    });
});

对于 div，你可以这样做：

<div class="image-hover-class">
    <a href="?tg=photos&photo=$imageid" \>
        <img src='users/$ptgid/images/$iimg' width='100' height='100'/>
    </a>
</div>

【讨论】：

【解决方案2】：

我没有在图像元素的 id 属性中看到。

当你这样做时

$("#image_"+imageid)

它试图找到这个ID，添加

id=image_".$imageid."到img

【讨论】：

【解决方案3】：

这可以通过使用 css 来完成。我在这里写了一个教程：

http://www.ozzu.com/html-tutorials/tutorial-creating-hover-effect-elements-using-css-t97597.html

只需包含您的原始图像和“褪色”图像即可。

【讨论】：