div内的淡化图像

时间:2009-06-24 14:41:47

标签: javascript jquery

我试图这样做,当鼠标移过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>

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

当你这样做时

$("#image_"+imageid)

试图找到这个id, 添加

ID =图像_ “$图像标识”。 img

答案 2 :(得分:0)

这可以使用css完成。我在这里写了一个教程:

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

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