Question

当我将鼠标悬停在页面上的每个图像链接时，如何更改页面背景。我想根据页面上的每个图像动态更改页面背景。请仔细查看代码，以便准确了解我想说的内容。

    <script>
        $(function() {
        $("a").hover(function() {
        var $link = $("img").attr("src");
                $("body").css("background", "url(" + $link + ")" );
        });
        });
    </script>

<html>
   <body>
      <a href="#" title="">
        <img src="portfolio_files/NEWSALV.gif" alt="">
      </a>
      <a href="#" title="">
        <img src="portfolio_files/TSThumb.gif" alt="">
      </a>
      <a href="#" title="">
        <img src="portfolio_files/MoreheadThumb.gif" alt="">
      </a>
   </body>
</html>

请提前感谢，请提供帮助。

Answer 1

使用$("img")每次都会返回文档中的第一个img元素。您需要每次都找到相对于img元素的a元素。

这可以通过$(this)和.find();

来实现

<script>
    $(function() {
        $("a").hover(function() {
            var $link = $(this).find("img").attr("src");
            $("body").css("background", "url(" + $link + ")" );
        });
    });
</script>

在悬停时更改背景图像到每个图库链接

1 个答案: