jQuery设置活动/悬停背景图像

我的列表中有5项，第一项（加载时）是活动的（jQuery添加了一个“active”类）。它们都有与之关联的背景图像。若我点击任何一个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>

您可以使用 ：悬停

css中的属性

活动：悬停{背景色：黑色；}

像这样的事

但我不确定它是否能在ie6中工作

$('.graduate_tab li').hover(
  function() { 
    $(this).css('background-image','your-image-cl.jpg'); 
  }, function() {
    $(this).css('background-image','your-image.jpg'); 
  });

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

这应该能奏效。如果我忘了什么，告诉我，我会编辑代码。

首先，我会用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...

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

然后在jQuery中，您需要担心的就是

活动的
类，如下所示：

.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...

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

在单击的类上使用，在其余的类上使用将把
活动的
类移动到单击的类上…如果您希望能够将其从已活动的类中删除（将其关闭），您可以将其替换为用于该行为。
我使用了click hover jquery函数。不需要给每个
li
一个css类。因此：

.ui-state-active, .ui-state-hover  {
    font-weight: bold !important;
    //and other css
}

及

希望这对别人有帮助

    $('.titleclz').mouseenter(function( event ) {

    $(this).css('background-image','url(bg-image1.png path)');
    $(this).css('background-repeat','no-repeat'); 

});

$(".titleclz").mouseleave(function( event ) {

    $(this).css('background-image','url(bg-image2.png path)');
    $(this).css('background-repeat','no-repeat');

});

JQuery获取图像背景悬停效果…
Squ36，谢谢回复。那不是我想要的。我需要做的是检测哪个li处于悬停状态，将其设置为彩色，保持“单击”的一种颜色，将其余的设置为黑白。所有IAMGE都不同，但符合li命名约定，例如graduate1-bw.png、graduate2-cl.png等。