WordPress中的jQuery-在mouseenter和mouseleave事件上进行字体反转

jQuery in WordPress - Font Awesome Invert on mouseenter and mouseleave events

本文关键字：字体 事件 mouseleave jQuery- 中的 mouseenter WordPress      更新时间：2024-02-04

我正在尝试向WordPress网站添加一个非常基本的小jQuery脚本，该脚本将fa inverse 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'));

现在，我已经在页面页脚的fa twitter方形图标中添加了IconOver的id，但它似乎并没有反转mouseenter上的颜色。

有人想过为什么会这样吗？我已经查看了尽可能多的资源和人们做类似事情的例子，我认为我在WordPress中正确地实现了jQuery的一点点。

该网站可在此处查看：http://dariusdevas.com/wp/?page_id=2

非常感谢您的任何想法！：-D

其fa-inverse

就是这样，下面是工作代码

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

您的代码中有两个错误，一个是由于贬低，另一个是拼写错误。

这就是它的样子：

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
相关文章：