WordPress中的jQuery-Mouseenter和mouseleave事件的字體超贊反轉

Question

我正在嘗試向WordPress網站添加一個非常基本的小jQuery腳本，該腳本將fa-invert Font Awesome類添加到事件mouseenter上的圖標上，然后在mouseleave上刪除該類。

這是我的小腳本：

//Jquery Script to invert colour of icons on hover

jQuery(document).ready(function($) {
    $("#IconHover").mouseenter(function(){
        $(this).addClass("fa-invert");
    });
    $("#IconHover").mouseleave(function(){
        $(this).removeClass("fa-invert");
    });
};

我已將該腳本添加到我的function.php文件中，如下所示，當我加載頁面時，它似乎運行良好：

//include IconHover.js script
wp_enqueue_script('IconHover', get_bloginfo('template_url').'/js/IconHover.js', array('jquery'));

現在，我已將IconHover的ID添加到頁面頁腳的fa-twitter-square圖標中，但它似乎並未反轉mouseenter上的顏色。

有人對為什么會這樣有任何想法嗎？ 我一直在研究許多資源和做類似事情的人的例子，我認為我在WordPress中正確實現了jQuery的一點點。

該站點可以在這里查看： http : //dariusdevas.com/wp/?page_id=2

任何想法都將不勝感激！ :-D

Answer 1

您的代碼中有兩個錯誤，一個是由於過時而導致的，另一個是錯字。

看起來是這樣的：

jQuery(document).ready(function($) {
    $("#IconHover").mouseenter(function(){
        $(this).addClass("fa-invert");
    });
    $("#IconHover").mouseleave(function(){
        $(this).removeClass("fa-invert");
    });
};

它應該是這樣的：

jQuery(document).ready(function($) {
    $("#IconHover").mouseenter(function(){
        $(this).addClass("fa-invert");
    });
    $("#IconHover").mouseleave(function(){
        $(this).removeClass("fa-invert");
    });
});

另外，除了您的jquery中提供的代碼之外，不推薦使用以下代碼行：

event.returnValue

這需要更改為：

event.preventDefault

Answer 2

它的fa-inverse

就是這樣，下面是工作代碼

jQuery(document).ready(function($) {
    $("#IconHover").mouseenter(function(){
        $(this).addClass("fa-inverse");
    });
    $("#IconHover").mouseleave(function(){
        $(this).removeClass("fa-inverse");
    });
});