Reputation: 6146
I simply want to disable the below function on mobile. Here is a Pen. It works but when I resize my browser the hover effect doesn't work as desired (<img>
hangs at the bottom of the h2
element. the desired effect is for the <img>
to follow the mouse cursor).
jQuery
if ( jQuery(window).width() > 769) {
jQuery(document).ready(function($){
jQuery('.article__title').on('mouseenter mousemove', function(evt){
jQuery(this).siblings('.article__img').css({left: evt.pageX+30, top: evt.pageY-200}).show();
jQuery(this).on('mouseleave', function(){
jQuery(this).siblings('.article__img').hide();
});
});
});
}
Upvotes: 1
Views: 68
Reputation: 10163
If jQuery(window).width() > 769
is false
then the code inside of it will never run. If it's true
then it will. When you open the pen you'll most likely have a wide enough window
. But that code runs once when the page loads and that's it. Resizing the window doesn't mean that code runs again, and even if it did you wouldn't want to call those functions multiple times.
What you need is to apply that condition inside jQuery('.article__title').on('mouseenter mousemove', function(evt){
so that it's checked every time you move the mouse.
Upvotes: 2