Javascript jQuery未在悬停状态下触发事件

我目前正在尝试制作一个导航菜单，点击它可以滚动到页面下方的一个div。最初它是有效的，但当我添加了一个CSS转换来突出显示文本时，jQuery将不再在单击它时触发滚动

$("#about, #about:hover").click(function() {
    $('html,body').animate({
        scrollTop: $("#box1").offset().top},
        'slow');
});

#about

id是导航菜单的一部分，单击后将滚动至

#box1

。我尝试将悬停状态添加到选择器中，将其更改为

。trigger

，而不是

。单击

，但我没有看到简单的解决方案。我在Chrome、Safari和using中重新创建了该事件

JQuery通常与转换、悬停状态或我的代码冲突吗

---

编辑：它在Fiddle示例中工作，但在本地生成时事件仍然没有发生（所有内容都链接并在控制台中正确无误）。

您的JS代码在DOM完全加载之前运行

将JS放入

document.ready（）中：

请参阅更新的
在DOM完全加载之前运行JS代码

将JS放入
document.ready（）中：

请参阅更新的
如果jQuery链接和/或函数链接位于标题中，则该选项无效

如果js链接在html的末尾，比如在结束body标记之前，它对我有效。
如果jQuery链接和/或函数链接在标题中，它就不起作用

如果js链接在html的末尾，就像在结束正文标记之前一样，这对我很有用。
您是否尝试过使用而不是
：hover
css选择器？在JSFIDLE中，您忘记添加jQuery资源了。添加后，它滚动到@JaqenH'ghar，它在小提琴中工作，但仍然不能在本地工作。在这里使用Google的1.12.2外部链接作为库。@Wikiti没有尝试过，我更熟悉CSS转换，所以这就是我使用的。检查您是否有最近添加的CSS中的z索引。可能是z-index正在停止事件。您是否尝试使用而不是
：hover
css选择器？在JSFIDLE中，您忘记添加jQuery资源。添加后，它滚动到@JaqenH'ghar，它在小提琴中工作，但仍然不能在本地工作。在这里使用Google的1.12.2外部链接作为库。@Wikiti没有尝试过，我更熟悉CSS转换，所以这就是我使用的。检查您是否有最近添加的CSS中的z索引。可能是z索引正在停止事件。文档表明库在标题中链接。我一直在标题中链接它，但我的问题纯粹是语法。文档表明该库链接在标题中。我一直在标题中链接它，但我的问题纯粹是语法。
$(document).ready(function () {
    $("#about, #about:hover").click(function () {
        $('html,body').animate({
            scrollTop: $("#box1").offset().top
        },
            'slow');
    });

    $("#portfolio, #portfolio:hover").click(function () {
        $('html,body').animate({
            scrollTop: $("#box2").offset().top
        },
            'slow');
    });

    $("#social, #social:hover").click(function () {
        $('html,body').animate({
            scrollTop: $("#box3").offset().top
        },
            'slow');
    });

    $("#contact, #contact:hover").click(function () {
        $('html,body').animate({
            scrollTop: $("#box4").offset().top
        },
            'slow');
    });
});