0

因此，我有一个徽标可以在鼠标悬停时更改其背景，我试图拥有 5 个不同的背景，每个背景都显示在鼠标悬停上，而不是随机的，并在第 5 次鼠标悬停完成时返回第一个背景。我怎样才能做到这一点？

这是jquery脚本

$(document).ready(function(){
  $("#logo").hover(
  function() {
    $(this).stop().animate({"opacity": "0"}, "slow");
  },
  function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
  });
});

和CSS

div#logo{
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
    width:216px;
    height:235px;
    position:absolute;
    right:45px;
    top:5px;
    z-index:12;
}

div#logo_hover{
    background-image:url(../images/logo_hover_blue.png);
    background-repeat:no-repeat;
    width:216px;
    height:235px;
    position:absolute;
    right:45px;
    top:5px;
    z-index:11;
}

编辑：

我遵循了 Scott M. 的建议并获得了以下代码：

$("#logo").click(function () {
  var color = $(this).css("background-image", "background" + bgnum + ".png");
});

它可能缺少一些东西......

但问题是我不知道如何使用它们各自的图像添加其他 div（logo1、logo2、logo3 和 logo4），然后在打开鼠标悬停之前保持不可见，最好的方法是什么？显示：没有？

4

1 回答 1

5

您可以维护一个计数器（例如 bgnum）并将其与文件名连接以获取每个背景。然后在悬停时使用

.css("background-image", "background" + bgnum + ".jpg")

然后将计数器和 mod 增加 5，这样它就不会超过您拥有的背景数量。

bgnum = (bgnum + 1) % 5;
于 2009-11-12T19:59:27.343 回答