Question

我有这样的结构：

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

每个模块部分的CSS属性为

background: url (imagename.png);

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

任何帮助？

感谢。

Answer 1

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

.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请求。

Answer 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 weiners做到这一点。）

jQuery悬停替换图像

2 个答案: