jQuery悬停替换图像

我有一个这样的结构：

<div class="module">
       <div class="moduleTop"></div>
       <div class="moduleContent"></div>
       <div class="moduleBottom"></div>
    </div>

每次悬停.module时，我需要使用jquery将3个模块部件的每个图像名称更改为imagename-over.png，并在悬停.module div时更改回原始源

有什么帮助吗

---

谢谢。

所有现代浏览器都支持：hover，您可以执行以下操作：

.module { background-image:url(/normal.png); } /* if you need this */
.module:hover .innerclass { background-image:url(/over.png/); }

对于IE6（它不支持：将鼠标悬停在锚元素之外的任何东西上），您可以执行以下操作

$('.module').hover(function() {
    $('.innerclass', this).addClass('foo');
}, function() {
    $('.innerclass', this).removeClass('foo');
});

.foo { background-image:url(/over.png); }

---

您可能还想看看如何使用CSS精灵，基本上就是将多个图像的状态叠加到一个图像中并改变位置，从而减少http请求。

下面是一个仅使用CSS的示例：

---

但这闻起来像是一个赋值，所以您可能必须使用jquery。如果是这样的话，在最上面的div中添加一个悬停监听器，然后在里面更改元素的类并在CSS中定义类，类似于meder的帖子（你可能希望对IE6 Weiner这样做。）

我只需要模块（父div）的悬停要更改每个模块部件的图像，请使用module:hover更改以下对象的背景图像：1）moduleTop 2）moduleContent 3）moduleBottomTry我的更新示例。css中的关键是执行

.module:hover.moduleTop

$('.module').hover(function() {
    $('.innerclass', this).addClass('foo');
}, function() {
    $('.innerclass', this).removeClass('foo');
});

.foo { background-image:url(/over.png); }

div.module:hover > div.moduleTop {
  background: red;
}

div.module:hover > div.moduleContent {
  background: yellow;
}

div.module:hover > div.moduleBottom {
  background: green;
}