jQuery 悬停替换图像答案

【问题标题】：jQuery Hover Replace ImagejQuery 悬停替换图像
【发布时间】：2009-10-06 11:28:19
【问题描述】：

我有这样的结构：

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

并且每个模块部分都有一个CSS属性

background: url (imagename.png);

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

有什么帮助吗？

谢谢。

【问题讨论】：

我只需要悬停模块（父 div）来更改每个模块部分的图像，因此 module:hover 将背景图像更改为：1）moduleTop 2）moduleContent 3）moduleBottom
试试我更新的例子。 css中的关键是做.module:hover .moduleTop

标签： jquery css

【解决方案1】：

所有现代浏览器都支持：hover，你可以这样做：

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

对于 IE6（不支持 :hover 除了锚元素之外的任何内容），您可以这样做

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

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

您可能还想看看使用 CSS sprites，基本上只是将多个图像的状态堆叠为一个并移动位置，从而减少 http 请求。

【讨论】：

【解决方案2】：

这是一个仅使用 CSS 的示例：

http://mooshell.net/Rd9EL/

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

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

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

但这听起来像一个任务，所以你可能必须使用 jquery。如果是这种情况，请在顶部 div 中添加一个悬停侦听器，然后在其中更改元素的类并在 CSS 中定义类，类似于 meder 的帖子（对于 IE6 Weiner，您可能无论如何都希望这样做。 )

【讨论】：