已解决

Question

当我将<img>悬停在电子商务中时，如何从<li>更改图片？

我想要的是：当我悬停一个列表项时，我希望更改另一个div的图像并使我悬停的图像（肯定不能正确表达自己的意思）

我的html是这样的：

<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);
});

Answer 1

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

由于我没有图像，我为图像添加了alt属性，并对大图像的alt属性进行了相同的更改，以便将鼠标悬停在lis上时可以看到。 alt属性（以及src属性）会随着大图片而改变。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="small-pics">
    <ul>
        <li class="small-pic-li">
            <img src="img/bussola1.jpg" class="small-pic" alt="img/bussola1.jpg" >
        </li>
        <li class="small-pic-li">
            <img src="img/bussola2.jpg" class="small-pic" alt="img/bussola2.jpg">
        </li>
        <li class="small-pic-li">
            <img src="img/bussola3.jpg" class="small-pic" alt="img/bussola3.jpg">
        </li>
        <li class="small-pic-li">
            <img src="img/bussola4.jpg" class="small-pic" alt="img/bussola4.jpg">
        </li>
    </ul>
</div>

<div>
    <img src="img/bussola1.jpg" id="large-pic" alt="img/bussola1.jpg">
</div>

Answer 2

这是解决问题的简单解决方案。我在Google上提供了一些随机图片进行演示。

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

.small-pic-li{
    display: inline;
}

.small-pic-li img{
    width: 100px;
}

#large-pic{
    width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
        <img src="https://cdn.shopify.com/s/files/1/0293/9277/products/05-10-18_Studio_1VD5673_Red_0213_1000x.JPG?v=1529565465" id="large-pic">
    </div>

    <div id="small-pics">
        <ul>
            <li class="small-pic-li">
                <img src="https://cdn.shopify.com/s/files/1/0293/9277/products/05-10-18_Studio_1VD5673_Red_0213_1000x.JPG?v=1529565465" class="small-pic">
            </li>
            <li class="small-pic-li">
                <img src="https://www.vipboutique.co.uk/images/sasha-hot-pink-cut-out-maxi-dress-p58-477_image.jpg">
            </li>
            <li class="small-pic-li">
                <img src="https://cdn.shopify.com/s/files/1/0004/6602/6559/products/product-image-452654874_580x.jpg?v=1524259536">
            </li>
            <li class="small-pic-li">
                <img src="https://www.lulus.com/images/product/w_560/1314234_204794.jpg">
            </li>
        </ul>
    </div>

所选小图像的src已被放置为大图像的src。

还请确保您在顶部添加了jQuery。

我不建议您使用一个单独的类，称为“ small-pic”，因为“ small-pic-li”可用于选择图像，从而使代码更简单。

还请注意，由于列表元素的块性质，“ small-pic-li”已内嵌显示，以防止图像彼此堆叠。

希望有帮助！

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

已解决

它通过使用：

2 个答案: