0

I'm trying to use an uncotroversial piece of code to change the background color of a div when the mouse hovers over it.

Currently, my install of drupal refuses to register the hover event, I have tried substituting my code with a console.log('hovering') and I still get nothing.

here is the code. http://jsfiddle.net/tmXfW/2/

( function($) {
        var msg = $().jquery;
        console.log(msg);
        $('div.quicklink-row').hover(function() {
                $(this).addClass('blue-link');
        }, function() {
                $(this).removeClass('blue-link');

        });
})(jQuery);​

2 Answers 2

1

You should wrap your functionality in a Drupal Behavior. This will make it work even if elements on the page change via ajax and whatnot.

So the following:

(function($) {
  Drupal.behaviors.myCustomModule = {
    attach: function() {
      //var msg = $().jquery;
      //console.log(msg);
      $('div.quicklink-row').hover(function() {
        $(this).addClass('blue-link');
      }, function() {
        $(this).removeClass('blue-link');
      });
    }
  };
})(jQuery);​

But aside from that.... why are you using Javascript for something that can be done so simply with CSS?

div.quicklink-row:hover {
  background: #00F;
}
0

The have been several issues with the jsfiddle code.

  1. The most suspected line is this: var msg = $().jquery; Try changing it to: var msg = $.fn.jquery;

  2. The jsfiddle has been reported to insert some invisible characters producing the SyntaxError: Unexpected token ILLEGAL errors in the console (see this issue)

  3. Your code contains only the encapsulation wrapper, but inside it lacks the $.ready(function(){}) or its equivalent.

So I typed your code from scratch, making the changes (1) and (3) and it worked fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.