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");
});
});
</script>
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
mathiasfc
There are some basic syntax errors in your code, as @Andreas commented, instead of
$(this).attr("class","wow rubberBand");and$(this).attr("class","");use
$(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... $thing .on('mouseenter', function() { $(this).addClass("active"); }) .on('mouseleave', function() { $(this).removeClass("active"); }) ; // this is the same... $('.hover-thing').hover( function() { $(this).toggleClass("blue"); });https://jsfiddle.net/sheriffderek/b5y6mrb0/
You could also use
.hover()or CSS:hover- depending on what you are doing. I very rarely find myself reaching for mouseenterDespite 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 - soremoveClass()is a helper that checks for that particular class in the array of classes and removes just that one.
