javascript - 当我将鼠标悬停在图片的叠加层上时更改图片

Question

我想更改悬停在上面的特定图片。但是，每张图片都在叠加层下方。

我找到了一个 solution当我将鼠标悬停在图片本身上时更改图片。但是，我只能将鼠标悬停在叠加层上(图片的父 div)。

<script  type='text/javascript'>
$(document).ready(function(){
$(".overlaydiv").hover(
    function() {$(this).attr("src","images/aboutR.png");},
    function() {$(this).attr("src","images/about.png");
    });
});
</script>

我是 Javascript 的新手，非常感谢任何帮助。

Answer 1

好吧，如果您的图片在上述叠加层中，代码如下:

$(document).ready(function(){
$(".overlaydiv").hover(
    function() {$(this).find('img').attr("src","images/aboutR.png");},
    function() {$(this).find('img').attr("src","images/about.png");
    });
});

这应该更新所有 <img>标签 src .overlaydiv 中的属性.

如果您的叠加层中有多个图像，并且每个图像在悬停时都应该有一个特定的"new"图像，您可以在每个图像标签上添加新的 src 作为属性，并更改您的 JS 以使用您的属性中包含的这个新 url更改 img src(而不是在您的 JS 中硬编码新 URL)。

例子:

<div class="overlaydiv">
    <img src="img1.jpg" default-src="img1.jpg" hover-src="img1-2.jpg>
    <img src="img2.jpg" default-src="img2.jpg" hover-src="img2-2.jpg>
</div>

Javascript:

$(document).ready(function(){
    $(".overlaydiv").hover(
        function() {
            $(this).find('img').each(function( index ) {
                $(this).attr('src', $(this).attr('hover-src'));
            });
        },
        function() {
            $(this).find('img').each(function( index ) {
                $(this).attr('src', $(this).attr('default-src'));
            });
        });
});

这更加灵活，并且可以防止在您的 JS 中对 URL 进行硬编码。它还使其与多个图像兼容，在叠加悬停时具有不同的版本。

注意我们需要default-src能够“记住”原始 src 的属性在悬停离开时重新设置(在悬停回调之后，当用户离开时)。您可以使用 .data() 实现相同的效果记住default-src .