2010-05-04 174 views
2

因此,在我的整個文檔中,我希望用戶每次都將鼠標懸停在具有特定類名的元素上,我想要添加一個類。將類添加到特定類名的.hover功能 - jQuery

我的CSS是這樣的:

.hotspot:hover, .hotspothover 
    { 
    border: 4px solid #fff; 
    box-shadow: 0px 0px 20px #000; 
    -webkit-box-shadow: 0px 0px 20px #000; 
    -moz-box-shadow: 0px 0px 20px #000; 
    z-index: 1; 
    } 

類名稱: 「熱點」。

我想這一點,但它似乎沒有工作時:

$("#hotspot.hover #hotspothover").addClass("bubble bottom"); 

感謝。

回答

2

您近距離了!

添加逗號:

$(".hotspot:hover, .hotspothover").addClass("bubble bottom"); 
+0

如何重寫其他類。例如。如何替換當前與'懸停'關聯的CSS屬性,並用與其他類關聯的CSS屬性替換 - 而不是添加它。 – marcamillion 2010-05-04 23:43:53

+2

您需要以覆蓋的方式定義「bubble」或「bottom」類。通常只要稍後加載它們就可以做到,但是你也可以在固執的聲明中加上'!important'。 – artlung 2010-05-05 00:16:47

+0

@artlung。對你說的+1。 – 2010-05-05 13:13:21

1

這裏是如何做到這一點。 (「。hotspot:hover,.hotspothover」)。addClass(「bubble bottom」);

1

喜歡的東西

$('.targetClass').hover(function() { $(this).toggleClass('hovered'); }); 

應該工作,如果你正在使用jQuery 1.4.2

1

也許我誤解了,但我想你想它添加上徘徊。這表明:

$('.hotspot, .hotspothover').hover(function(){ 
    $(this).addClass('bubble bottom'); 
}); 

如果您想在徘徊了,然後換addClasstoggleClass他們也被刪除。

UPDATE:發問隨訪,問:

,如果我想他們 取代 '熱點' 或 'hotspothover' 現在發生了什麼? 作爲,在網頁上的所有項目與 類熱點或類 「hotspothover」與「泡沫 底部」

我會改變這樣的替換:

$('.hotspot').hover(function(){ 
    $(this).addClass('bubble bottom').removeClass('hotspot'); 
}); 
$('.hotspothover').hover(function(){ 
    $(this).addClass('bubble bottom').removeClass('hotspothover'); 
}); 

現在,你也可以做到這一點,但如果你想要具體說明這些行爲,那麼把它作爲兩組調用更有意義。

$('.hotspothover, .hotspot').hover(function(){ 
    $(this).addClass('bubble bottom').removeClass('hotspothover hotspot'); 
}); 
+0

我可以只使用類名'hotspothover'而不是'.hotspot:hover'嗎? – marcamillion 2010-05-04 23:47:00

+0

是的。我的代碼是這樣說的:「對於我的頁面上的所有項目,」hotspot「類或者」hotspothover「類 - 如果它們被移走,永久性地向它們添加」bubble「和」bottom「類。 ,如果你希望在懸停時添加類,並在非懸停狀態下移除,請使用toggleClass' – artlung 2010-05-05 00:10:41

+0

現在如果我想讓它們替換'hotspot'或'hotspothover',會發生什麼情況?熱點或類'hotspothover'取代它'氣泡底'。 – marcamillion 2010-05-05 00:22:10