使用jQuery悬停列表项时从img更改图像

当我在

上悬停时，如何从

更改图片，就像在电子商务中看到的那样

我想要的是：当我悬停一个列表项时，我希望来自另一个div的图像发生变化，并使我悬停的图像发生变化（非常确定我无法正确地表达自己）

我的html是这样的：

---

解决了的 它通过使用：

---

当鼠标悬停在li上时，必须获得图像的src属性，然后将其作为大图像的src属性应用

由于我没有您拥有的图像-我已将alt属性添加到图像中，并对大图像的alt属性应用了相同的更改-以便您可以在将鼠标悬停在lis上时看到这一点。大图像的alt属性（以及src属性）会发生更改

$（'.small pic li'）。悬停（函数（）{
var imgSrc=$（this.find（'img'）.attr（“src”）；
$（'大型图片'）.attr（'src'，imgSrc）.attr（'alt'，imgSrc）
});











当鼠标悬停在li上时，必须获取图像的src属性，然后将其作为大图像的src属性应用

由于我没有您拥有的图像-我已将alt属性添加到图像中，并对大图像的alt属性应用了相同的更改-以便您可以在将鼠标悬停在lis上时看到这一点。大图像的alt属性（以及src属性）会发生更改



$（'.small pic li'）。悬停（函数（）{
var imgSrc=$（this.find（'img'）.attr（“src”）；
$（'大型图片'）.attr（'src'，imgSrc）.attr（'alt'，imgSrc）
});











这里有一个简单的解决方案。我已经包括了一些来自谷歌的随机图片以供演示


$（“.small pic li img”）.hover（函数（）{
$（“#大型图片”）.attr（“src”），$（this.attr（“src”））；
})
。小pic li{
显示：内联；
}
.小pic li img{
宽度：100px；
}
#大型图片{
宽度：400px；
}











这里有一个简单的解决方案。我已经包括了一些来自谷歌的随机图片以供演示


$（“.small pic li img”）.hover（函数（）{
$（“#大型图片”）.attr（“src”），$（this.attr（“src”））；
})
。小pic li{
显示：内联；
}
.小pic li img{
宽度：100px；
}
#大型图片{
宽度：400px；
}











gavgrif的答案是正确的，这里有一个JSFIDLE演示：这不起作用，因为你的
$（这个）
是参照
#大图片的，所以你可以
var self=This
在之前使用
$（self）
内部它起作用了（有点）！我只需要更改
varimgsrc=$（this.attr（'src'）
to
var imgSrc=$（this.children（）.attr（'src'）$（This）
引用的是
#大图片
，所以您可以
var self=This
之前使用
$（self）
内部它起作用（有点）！我只需要更改
varimgsrc=$（this.attr（'src'）
to
var imgSrc=$（this.children（）.attr（'src'）<div id="small-pics">
    <ul>
        <li class="small-pic-li">
            <img src="img/bussola1.jpg" class="small-pic">
        </li>
        <li class="small-pic-li">
            <img src="img/bussola2.jpg" class="small-pic">
        </li>
        <li class="small-pic-li">
            <img src="img/bussola3.jpg" class="small-pic">
        </li>
        <li class="small-pic-li">
            <img src="img/bussola4.jpg" class="small-pic">
        </li>
    </ul>
</div>

<div>
    <img src="img/bussola1.jpg" id="large-pic">
</div>

$('.small-pic-li').hover(function () {
    $('#large-pic').attr(function () {
        $(this).attr("src");
    });
});

$('.small-pic-li').hover(function () {
    var imgSrc = $(this).children().attr('src');
    $('#large-pic').attr('src', imgSrc);
});