Question

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

Answer 1

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

这应该可以解决问题。如果我忘记了什么，请告诉我，我将编辑代码。

Answer 2

首先，我会在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()，在其余部分使用.addClass()将active课程移至已点击的课程...如果您希望能够将其从已删除的课程中删除有效的一个（将其关闭）您可以将.toggleClass()替换为{{3}}以获取该行为。

Answer 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');

 });

希望这有助于某人。

Answer 4

你可以使用：悬停

css中的

属性

有效：悬停{background-color：black;}

这样的事......

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

Answer 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获取图像背景悬停效果......

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

5 个答案: