Why aren't these Dojo hover events working?

Question

I'm new to Dojo (quite experienced in jQuery) for a project, and am working on adding/removing some classes that will change styles for main navigation links and drop-downs.

Here is the code I've written:

dojo.addOnLoad(function() {
    dojo.query('#primary-nav > ul > li > div').forEach(function(container) {
     var hoverToggles = dojo.query('> a, > ul', container),
      link = dojo.query('> a', container);

     dojo.connect(link, 'onmouseover', function() {
      dojo.addClass(hoverToggles, 'hover');
     });

     dojo.connect(link, 'onmouseout', function() {   
      dojo.removeClass(hoverToggles, 'hover');
     });
    });
});

No code placed into the event handlers is run (console.log, alert). Values for link and hoverToggles are correct.

Am I doing something wrong here? Side question: Is there a more Dojo-idiomatic way of doing this?

Answer 1

dojo.query() returns a NodeList. dojo.addClass() and the rest work with DOM nodes.

Try something like that:

dojo.addOnLoad(function() {
  dojo.query('#primary-nav > ul > li > div').forEach(function(container) {
    var hoverToggles = dojo.query('> a, > ul', container),
        link = dojo.query('> a', container);

    link.onmouseover(function() {
      hoverToggles.addClass('hover');
    });

    link.onmouseout(function() {      
      hoverToggles.removeClass('hover');
    });
  });
});