如何用jQuery強制懸停狀態？

Question

請considere這個CSS代碼：

a { color: #ffcc00; } 
a:hover { color: #ccff00; } 

此HTML代碼：

<a href="#" id="link">Link</a> 
<button id="btn">Click here</button> 

最後，這個JS代碼：

$("#btn").click(function() { 
    $("#link").trigger("hover"); 
}); 

我想提出我的鏈接用途它的僞類：點擊按鈕時懸停。 我試圖觸發像mousemove，mouseenter，懸停等事件，但任何人都可以工作。 請注意，我要強制使用我的CSS僞類的：懸停規範，而不是使用這樣的：

$("#link").css("color", "ccff00"); 

有些人知道我該怎麼做呢？萬分感謝。

Answer 1

你將不得不使用一個類，但不用擔心，它非常簡單。首先，我們將分配您的:hover規則，不僅適用於物理懸停的鏈接，還適用於類名爲hovered的鏈接。

a:hover, a.hovered { color: #ccff00; } 

接下來，當你點擊#btn，我們將切換上#link的.hovered類。

$("#btn").click(function() { 
    $("#link").toggleClass("hovered"); 
}); 

如果鏈接已經有類，它將被刪除。如果它沒有課程，它將被添加。

Answer 2

此外，您可以嘗試觸發鼠標懸停。

$("#btn").click(function() { 
    $("#link").trigger("mouseover"); 
}); 

不知道這是否適用於您的特定場景，但我已成功觸發mouseover而不是懸停在各種情況下。