jQuery 设置事件/悬停背景图像

Question

我有一个包含 5 个元素的列表，第一个(加载时)是事件的(jQuery 添加了一个“事件”类)。它们都有与之关联的背景图像。如果我单击任何 li 的另一个 div 更新相关内容(这是有效的)。

但是我正在努力解决以下问题:

如果您单击一个 li，将其背景图像更新为彩色('-cl.png' 的后缀)。当我将鼠标悬停在另一个图像上时，将其背景图像更新为颜色并保持被点击的图像(具有一类“事件”)颜色。如果 li 没有悬停在上方，则将背景图像设置为黑白('-bw.png' 的后缀)但保持事件的一种颜色。

希望我已经解释清楚了。关于如何实现这一目标的任何想法？谢谢，布雷特

这是我的 HTML:

<ul class="graduate_tab">
<li class="graduate1"><a href="#grad1"><span class="gradimg1">grad1</span></a></li>
<li class="graduate2"><a href="#grad2"><span class="gradimg2">grad2</span></a></li>
<li class="graduate3"><a href="#grad3"><span class="gradimg3">grad3</span></a></li>
<li class="graduate4"><a href="#grad4"><span class="gradimg4">grad4</span></a></li>
<li class="graduate5"><a href="#grad5"><span class="gradimg5">grad5</span></a></li></ul>

Answer 1

首先，我会用 CSS 完成大部分的工作，如下所示:

.graduate1 { background: url(image1-bw.png); }
.graduate1.active, .graduate1:hover { background: url(image1-cl.png); }
.graduate2 { background: url(image2-bw.png); }
.graduate2.active, .graduate2:hover { background: url(image2-cl.png); }
//etc...

然后在 jQuery 中，您需要担心的是 active 类，如下所示:

$('.graduate_tab li').click( function() {
  $(this).addClass('active').siblings().removeClass('active');
});

使用 .addClass()在点击的那个和.removeClass()其余的会将 active 类移动到单击的类...如果您希望能够将其从已经激活的类中删除(将其关闭)，您可以替换 .addClass()与 .toggleClass()对于这种行为。