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

【问题标题】：jQuery set active/hover background imagesjQuery 设置活动/悬停背景图像
【发布时间】：2010-07-19 09:34:43
【问题描述】：

我有一个包含 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>

【问题讨论】：

标签： jquery css events

【解决方案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()。

【讨论】：

【解决方案2】：

$('.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');
});

这应该可以解决问题。万一我忘记了什么，告诉我，我会编辑代码。

【讨论】：

Squ36，感谢您的回复。这不是我所追求的。我需要做的是检测哪个 li 悬停，将那个设置为彩色，保持“点击”的一种颜色并将其余设置为黑白。所有的图像都不同，但符合 li 命名约定，例如。毕业1-bw.png、毕业2-cl.png等

【解决方案3】：

我使用了 click hover jquery 功能。无需在 css 中给每个 li 一个类。因此：

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

和

 jQuery('.graduate_tab li').bind('click hover', function () {
        jQuery(this).addClass('.ui-state-active')
                    .siblings().removeClass('.ui-state-active');

 });

希望这对某人有所帮助。

【讨论】：

【解决方案4】：

您可以使用 :悬停

CSS 中的属性

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

像这样的……

但我不确定它是否适用于 ie6。

【讨论】：

【解决方案5】：

    $('.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 获取图片背景悬停效果...

【讨论】：