jquery - 循环更改图像不起作用

Question

我在这个函数中使用 for 循环通过 jQuery 显示所有元素:

<script> 
$(function() {
    var number_menus = 9;
    for (i = 1; i <= number_menus; i++) {
        var p1 = +i;
        $(".wm_" + i).show()
            .css("background-image", "url(imagenes/footer/m/" + i + ".png)");

        $(".wm_" + i).mouseover(function() {
            $(this).css(
                "background-image", 
                "url(imagenes/footer/m/" + i + "_down.png)"
            );
            alert("this_down.png");
        });

        $(".wm_" + i).mouseout(function() {
            $(this).css(
                "background-image", 
                "url(imagenes/footer/m/" + i + ".png)"
            );
        });
    }
});​
</script>

在另一边，我有这个代码用于显示所有元素或图像加载并创建鼠标悬停效果:

<div id="web_footer_publi">
  <div id="web_footer_marks" class="wm_1"></div> 
  <div id="web_footer_marks" class="wm_2"></div> 
  <div id="web_footer_marks" class="wm_3"></div> 
  <div id="web_footer_marks" class="wm_4"></div>
  <div id="web_footer_marks" class="wm_5"></div> 
  <div id="web_footer_marks" class="wm_6"></div> 
  <div id="web_footer_marks" class="wm_7"></div> 
  <div id="web_footer_marks" class="wm_8"></div>
  <div id="web_footer_marks" class="wm_9"></div>
</div>

当创建函数时，我想在循环中显示所有类的所有可能性，但是当我查看图像时，这会向我显示循环的其他图像并且效果不好，我想，请告诉我这段代码中的效果有什么不好有了它

谢谢!!

Answer 1

使用 :hover 选择器使用一些 CSS，而不是进行 mouseover 和 mouseout

<style>
.wm_1 {
  background-image: url(imagenes/footer/m/1.png);
}
.wm_1:hover {
  background-image: url(imagenes/footer/m/1_down.png);
}
</style>

不需要JS

对其余节点重复此 CSS - 2,3,4...9