jQuery not triggering event in hover state

Question

I'm currently trying to make a navigational menu that on click scrolls to a div positioned lower on the page. Initially it worked but as I added a CSS transition to highlight the text, the jQuery will no longer trigger the scrolling to happen upon clicking it.

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

The #about id is a part of the nav menu and will scroll to #box1 on click. I've tried adding the hover state to the selector, changing it to .trigger rather than .click but I'm not seeing a simple solution. I've recreated the event in Chrome, Safari, and using JSFiddle.

Is the JQuery conflicting with the transition, the hover state, or my code in general?

EDIT: It is working in the Fiddle example but the event still isn't happening when produced locally (everything is linked and correct with no errors in console).

Have you tried using $.hover instead of :hover css selector? — Wikiti
– Wikiti, Commented Jun 11, 2016 at 16:49
In your JSFiddle you forgot to add the jQuery resource. After adding it - it scrolled updated JSFiddle — Jaqen H'ghar
– Jaqen H'ghar, Commented Jun 11, 2016 at 16:52
@JaqenH'ghar It is working in Fiddle but still isn't working locally. Using Google's 1.12.2 external link for the library here. — shaun
– shaun, Commented Jun 11, 2016 at 16:55
@Wikiti Haven't tried it, I'm more familiar with CSS transitions so that's what I used. — shaun
– shaun, Commented Jun 11, 2016 at 16:55
Check if you have any z-index in css which you recently added. May be z-index is stopping the event. — Vijendra Kumar Kulhade
– Vijendra Kumar Kulhade, Commented Jun 11, 2016 at 16:55

Jaqen H'ghar · Accepted Answer · 2016-06-11 18:04:53Z

2

Your JS code runs before the DOM is fully loaded.

Put the JS inside document.ready();:

$(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');
    });
});

See updated JSFiddle

edited Jun 11, 2016 at 18:04

answered Jun 11, 2016 at 17:57

Jaqen H'ghar

17k8 gold badges52 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iMarketingGuy · Accepted Answer · 2016-06-11 18:11:10Z

0

It doesn't work if your jQuery link and/or functions link are in the header.

It works for me if the js links are towards the end of your html like before the closing body tag.

edited Jun 11, 2016 at 18:11

answered Jun 11, 2016 at 18:05

iMarketingGuy

7041 gold badge4 silver badges11 bronze badges

1 Comment

shaun Over a year ago

Documentation suggests that the library is linked in the header. I've been linking it in the header but my problem was purely syntax.

Collectives™ on Stack Overflow

jQuery not triggering event in hover state

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related