Syntax error in jQuery hover()

Question

I'm trying to build a site with a navigation menu which toggles class upon hovering over the navigation buttons which are not currently "selected" or "active". Here is a simple version of the code:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
ul li a.selected {font-weight:bold;}
ul li a.hover {color:yellow;}
div.page {position:absolute;}
</style>

<script type="text/javascript">
$(function(){
    $("div.page:not(:first)").hide();   // hide all pages except the home page

    var menu=$("div.navMenu ul li a");
    menu.click(function(){
        var previous=window.location.hash;
        var selected=$(this).attr("href");
        if (previous != selected) {
            $("div.page"+previous).fadeOut();
            $("div.page"+selected).fadeIn();
            }
        $(this).addClass("selected");
        menu.not(this).removeClass("selected");
    });

    menu.hover(function(){
        $(this:not(.selected)).toggleClass("hover");
    });

});
</script>
</head>
<body>
<div class="navMenu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="page" id="home">This is my home page.</div>
<div class="page" id="portfolio">This is my portfolio page.</div>
<div class="page" id="contact">This is my contact page.</div>
</body>
</html>

Dreamweaver indicates that there is a syntax error in the line with

$(this:not(.selected)).toggleClass("hover");

However, I don't see what the syntax error is. (The idea is to toggle the "hover" class only for menu buttons which do not have the "selected" class). Any help would be greatly appreciated.

James Johnson · Accepted Answer · 2011-10-25 18:14:11Z

2

I believe it should be:

$(this).not(".selected").toggleClass("hover");

answered Oct 25, 2011 at 18:14

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

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

2 Comments

Kurt Peek Over a year ago

By the way, the "if.. hasClass" thing doesn't seem to be necessary; as far as I can tell "removeClass" doesn't do anything anyways if the element does not have that class.

James Johnson Over a year ago

Glad you got it working. Don't forget to accept the answer if you're satisfied.

Marco · Accepted Answer · 2011-10-25 18:14:27Z

1

It's probably supposed to be $(this).not(".selected").toggleClass("hover"); or so

answered Oct 25, 2011 at 18:14

Marco

2,3481 gold badge22 silver badges27 bronze badges

Comments

Samich · Accepted Answer · 2011-10-25 18:14:45Z

0

$(this:not(.selected)).toggleClass("hover"); expression is not valid.

Use something like:

menu.hover(function(){
        if ($(this).hasClass('selected'))
            $(this).addClass("hover");
    }, function() {
        if ($(this).hasClass('selected'))
            $(this).removeClass("hover");
    });

answered Oct 25, 2011 at 18:14

Samich

30.4k6 gold badges70 silver badges80 bronze badges

Collectives™ on Stack Overflow

Syntax error in jQuery hover()

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related