jQuery設置活動/懸停的背景圖像

我有一個列表中有5個項目，第一個（加載）是活動的（有一類'活躍'由jQuery添加）。他們都有與他們相關的背景圖片。如果我點擊任何李的另一個div更新與相關內容（這是工作）。jQuery設置活動/懸停的背景圖像

但是我用下面的掙扎：

如果單擊李，更新它的背景圖像進行色彩（後綴「-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>

來源

2010-07-19 Brett

首先，我會做最工作的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類到點擊的一個...如果你想能夠從一個已經活躍的一個（t oggle），你可以用.toggleClass()代替.addClass()這個行爲。

來源

2010-07-19 10:25:39

可以使用：懸停

財產CSS

積極：懸停{背景色：黑色;}

somthing like this ...

但我不是確定它會在IE6中工作。

來源

2010-07-19 09:37:40

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

這應該有所斬斷。如果我忘記了一些東西，告訴我，我會編輯代碼。

來源

2010-07-19 09:44:31 3rgo

Squ36，感謝您的答覆。這不是我所追求的。我需要做的事情是檢測哪個li被徘徊，將其中一個着色，保持「單擊」一種顏色，並將剩下的顏色設置爲黑白。所有的iamges都不同，但符合命名約定，例如。 graduate1-bw.png，graduate2-cl.png等 – Brett 2010-07-19 10:13:26

我使用了點擊懸停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'); 

});

希望這可以幫助別人。

來源

2012-05-10 12:01:22

$('.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得到圖像背景懸停效果...

來源

2012-08-30 09:10:23

jQuery設置活動/懸停的背景圖像

回答

相關問題