div內的圖像褪色

Question

我正在嘗試獲取它，所以當鼠標移到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>

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

Answer 2

我在圖片元素ID屬性中看不到。

當你這樣做

$("#image_"+imageid)

嘗試找到此ID，添加

id = image _“。$ imageid。” 到img

Answer 3

只需使用CSS即可完成。 我在這里寫了一個教程：

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

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