jquery - 我可以在 jquery 悬停时更改图像吗？

Question

我有这个大图像显示，在底部我有小图像，如果可能的话，我想要大图像到我悬停的图像。谢谢。
这是我的代码。

<div class="wrapper">
    <div class="inner">
        <img src="img/1.png" alt="image 1">
    </div>
    <ul class="small">
        <li> <img src="img/1.png" alt="image 2"> </li>
        <li> <img src="img/2.png" alt="image 2"> </li>
        <li> <img src="img/3.png" alt="image 2"> </li>
        <li> <img src="img/4.png" alt="image 2"> </li>
        <li> <img src="img/5.png" alt="image 2"> </li>
    </ul>
</div>

这是我的 jquery 但不起作用。

<script type="text/javascript">
$(document).ready(function() {
        $('.small').hover(function() {
            $('.inner img').attr('src' = '.small img src')
        });
});
</script>

Answer 1

尝试这个：

$(document).ready(function () {
    $('.small img').hover(function () {
        $('.inner img').attr('src' ,this.src)
    });
});

演示在这里

Answer 2

.attr("src", "small img src");

以上是将参数传递给方法的 JavaScript 语法。 'string' = 'string'根本不是有效的 JavaScript 语法。

Answer 3

替换这个：

$('.inner img').attr('src' = '.small img src');

和：

$('.inner img').attr('src' = $(this).attr('src'));

问题是，.small img src不返回属性值。

Answer 4

$(document).ready(function () {
    $('.small li').hover(function () {
        var tmpUrl = $(this).find("img").attr('src');
        $(".inner img").attr("src", tmpUrl);
    });
})

Answer 5

你的逻辑有一个小错误，

尝试将您的脚本重写为，

$('ul.small img').hover(function ()
{
  $('.inner img').attr('src' ,$(this).attr('src'));
});