Question

您好我正在学习一个教程，其中一个方面似乎没有用，我也不明白我哪里出错了。

当我将鼠标悬停在缩略图上时，它应该将主图像更改为我刚刚悬停的内容。我想我在代码的JQuery部分错过了一些东西。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="core.css">
<meta name="robots" content="noindex, nofollow">
<title>Build A Greyscale Image Gallery</title>

<script src="js/jquery-1.11.0.js"></script>

<script>

    $.(document).ready(function(){
        $.('.thumb').hover(function(){
            $('.main_image img').attr('src',$(this).children('img').attr('src'));
            });
    })

</script>

</head>
<body>

<h2>Build A Greyscale Image Gallery</h2>

<div class="gallery">
    <div class="main_image">
        <img src="images/aston.jpg" />
    </div>

    <div class="selection_image">
            <div class="thumb">
            <div class="overlay"></div>
            <img src="images/aston.jpg" />
        </div>
        <div class="thumb">
            <div class="overlay"></div>
            <img src="images/aston2.jpg" />
        </div>
        <div class="thumb">
            <div class="overlay"></div>
            <img src="images/aston3.jpg" />
        </div>
        <div class="thumb">
            <div class="overlay"></div>
            <img src="images/aston4.jpg" />
        </div>
        <div class="thumb">
            <div class="overlay"></div>
            <img src="images/aston5.jpg" />
        </div>
        <div class="thumb">
            <div class="overlay"></div>
            <img src="images/aston6.jpg" />
        </div>
        <div class="thumb">
            <div class="overlay"></div>
            <img src="images/aston7.jpg" />
        </div>
        <div class="thumb">
            <div class="overlay"></div>
            <img src="images/aston8.jpg" />
        </div>
        <div class="thumb">
            <div class="overlay"></div>
            <img src="images/aston9.jpg" />
        </div>
    </div>
</div>

</body>
</html>

Answer 1

我建议您在.之后删除$。尝试类似下面的内容！

$(document).ready(function(){
    $('.thumb').hover(function(){
        $('.main_image img').attr('src',$(this).children('img').attr('src'));
    });
});

如果没有添加，请建议添加jQuery。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

JQuery和改变img src

1 个答案: