Question

我正在尝试将旧网站的功能尽可能地复制，我遇到了.hover和.each的问题。此时，它将在鼠标悬停时交换图像，但由于某种原因不会在鼠标移开时进行交换。我知道这是与语法相关的东西，但是当我感到寒冷时，我的大脑却没有抓住它。

相关代码：

<script>
(function($) {
    $(".home-center").hover( function (){
        $("img", this).each(
            function() {
                $(this).attr("src", $(this).attr("src").replace(/-off.png/, "-on.png"));
            },
            function() {
                $(this).attr("src", $(this).attr("src").replace(/-on.png/, "-off.png"));
            }
        );
    });
})(jQuery);
<script>
<div class="home-center">
    <div class="home-right">
        <img class="home-icon" src="/images/homepage/home-icon-off.png" />
    </div>
    <div class="home-link">
        <img class="home-img" src="/images/homepage/home-downloads-off.png" />
    </div>
</div>

Answer 1

最简单的方法是使用CSS，而不是依赖JavaScript：

<style>
  .home-center .off {
    display: inline;
  }
  .home-center:hover .off {
    display: none;
  }
  .home-center .on {
    display: none;
  }
  .home-center:hover .on {
    display: inline;
  }
</style>
<div class="home-center">
  <div class="home-right">
    <img class="home-icon off" src="/images/homepage/home-icon-off.png" />
    <img class="home-icon on" src="/images/homepage/home-icon-on.png" />
  </div>
  <div class="home-link">
    <img class="home-img off" src="/images/homepage/home-downloads-off.png" />
    <img class="home-img on" src="/images/homepage/home-downloads-on.png" />
  </div>
</div>

我没有测试这个，所以它可能是错的，但你明白了。

我认为这至少可以在IE7 +中使用，但很可能在IE6甚至是IE5中。

Answer 2

将订单更改为：

$(document).ready(function() {
    $(".home-center").each(
        $(this).hover( function (){
            var img = $(this).children('img');
            function() {
                img.attr("src", img.attr("src").replace(/-off.png/, "-on.png"));
            },
            function() {
                img.attr("src", img.attr("src").replace(/-on.png/, "-off.png"));
            }
        );
    });
});

Answer 3

.hover需要2个参数（mouseenter，mouseleave）。你只有一个arg。

尝试以下内容，（请参阅下面的备用解决方案）

(function($) {
    $(".home-center").hover( 
        function () { //mouseenter
           $("img", this).each(function() {
                 $(this).attr("src", $(this).attr("src").replace(/-off.png/, "-on.png"));
            });
         },
         function () { //mouseleave
            $("img", this).each(function() {
                  $(this).attr("src", $(this).attr("src").replace(/-on.png/, "-off.png"));
            });
         }
    );
})(jQuery);

或者，我只是将.mouseenter和.mouseleave简化为选择器调用次数。

(function($) {
     $("img", ".home-center").mouseenter(
           function () { //mouseenter
               $(this).each(function() {
                    $(this).attr("src", $(this).attr("src").replace(/-off.png/, "-on.png"));
                });
           })
           .mouseleave(function () { //mouseleave
                $(this).each(
                   function() {
                     $(this).attr("src", $(this).attr("src").replace(/-on.png/, "-off.png"));
                });
             }
         );
})(jQuery);

Answer 4

您需要在函数内部或悬停之外应用每个函数。现在你只为鼠标悬停提供一个参数（每个）悬停，鼠标输出没有任何内容。

Answer 5

关闭！看起来像一个嵌套问题。它是hover，它带有两个参数，而不是each：

(function($) {
$(".home-center").hover( function (){
    $("img", this).each(
        function() {
            $(this).attr("src", $(this).attr("src").replace(/-off.png/, "-on.png"));
        }
    ),
    $("img", this).each(
        function() {
            $(this).attr("src", $(this).attr("src").replace(/-on.png/, "-off.png"));
        }
    );
});
})(jQuery);

将鼠标悬停在div上并使用jQuery更改两个图像？

5 个答案: