鼠標懸停風格變化與jQuery

採取以下HTML：鼠標懸停風格變化與jQuery

<li> 
    <p> 
    <a href="#" class="link" ><img src="images/photo_cityguild_cropped.jpg" alt="Education" title="Education"> 
    <span class="label">E D U C A T I O N</span> 
    </a> 
    </p> 
    </li>

我想根本上改變用戶懸停在圖片鏈接的事件類<span>的。

我還沒有我帶了很多使用jQuery和它已經有一段時間，無論如何，我嘗試以下操作：

$(".link").mouseover(function() { 
    $(this).find("span").addclass("label2"); 
    }).mouseout(function(){ 
    $(this).find("span").removeclass("label2"); 
    });

可能有人指示我，什麼我需要更正，因爲它目前無所事事。

感謝，

編輯我的解決方案更新。

實現了這個代碼，而不是：

$(".link").live("mouseover mouseout", function(event) { 
    if (event.type == "mouseover") { 
    $(this).find("span").addClass("label2"); 
    } else { 
    $(this).find("span").removeClass("label2"); 
    } 
});

來源

2011-07-01 buymypies

我已經糾正語法重構代碼，但還是我得到什麼：S – buymypies

做我之前，我可以刪除「標籤」類看到label2的影響？ – buymypies

下次如果你提到你的HTML片段被動態地添加到DOM – Mutt

是的，問題出在您調用的方法上。它應該如上所述，即addClass和removeClass。

另外，我覺得你可以使用hover事件

 
$(".link").hover(function() { 
    $(this).find("span").toggleClass("label2"); 
});

來源

2011-07-01 21:12:30 a5his

我建議.hover()而不是鼠標懸停輸入/輸出，並找到替代children('span')

來源

2011-07-01 20:27:41 helloandre

，我不同意懸停，我自己。我真的不認爲它比'擴展'的形式更有幫助。不過，我完全支持使用find而不是孩子。 –

（ '跨'）你有一個語法錯誤。這是

addClass()

和

removeClass()

大寫 'C'。

來源

2011-07-01 20:29:05 mariogl

addClass and removeClass

通知駝峯規則

來源

2011-07-01 20:30:17 AlienWebguy

JavaScript函數是大小寫敏感的。

在這種情況下.addclass應該.addClass和.removeclass應.removeClass

小提琴：http://jsfiddle.net/Uq67C/1/

編輯：

你的CSS正在尋找與類label和label2元素的元素裏面有ID爲menu。例如：

<ul id="menu"> 
<li> 
    <p> 
    <a href="#" class="link" ><img src="images/photo_cityguild_cropped.jpg" alt="Education" title="Education"> 
    <span class="label">E D U C A T I O N</span> 
    </a> 
    </p> 
    </li> 
</ul>

應該工作。

來源

2011-07-01 20:30:25 Mutt

我明顯可以看到這個作品，但是對於我自己來說，在更正語法之後仍然沒有運氣：S – buymypies

@buymypies您的CSS看起來像什麼？ – Mutt

我的jquery工作，因爲我測試過它的用途，所以有些東西不是用我的語法寫的？ – buymypies

鼠標懸停風格變化與jQuery

回答

相關問題