jquery mouseover() isn't working

I've got this bit of jquery which is meant to add class called "wow rubberBand" which is a special class that gives an animation to the element.

However for some reason the animation isn't kicking in.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="wow.min.js"></script>
<script>new WOW().init();</script>

<script type="text/javascript">

 $(document).ready(function() {
  $("header").mouseover(function() {
    $(this).find("span").addClass("wow rubberBand");

    $("header").mouseout(function() {
    $(this).find("span").removeClass("wow rubberBand");

3 answers

  • answered 2017-06-17 18:06 Kulvir Kaur

    Use <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> on the top of the page

  • answered 2017-06-17 18:06 Mathias Falci

    There are some basic syntax errors in your code, as @Andreas commented, instead of $(this).attr("class","wow rubberBand"); and $(this).attr("class","");


    $(this).addClass("wow rubberBand"); and $(this).removeClass("wow rubberBand");

  • answered 2017-06-17 18:06 sheriffderek

    You can chain your mouse events like this:

    $thing = $('.thing'); // 'query' for this dom element and cache it - you can do this with your span things for example... 
      .on('mouseenter', function() {
      .on('mouseleave', function() {
    // this is the same...
    $('.hover-thing').hover( function() {


    You could also use .hover() or CSS :hover - depending on what you are doing. I very rarely find myself reaching for mouseenter

    Despite the comments: $(this).attr('class', ''); and $(this).attr('class', 'className'); - are totally valid ways of changing a class attr. The negative part is that you'll clobber any existing classes if you remove al of them - so removeClass() is a helper that checks for that particular class in the array of classes and removes just that one.