Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery hoverIntent - What am I doing wrong when I split the function?
    primarykey
    data
    text
    <p>I split the function for hoverintent and that worked but now the div isn't hiding until the mouse leaves?</p> <p>I wrote this it works okay, I'm new to jquery as you can probably tell.</p> <pre><code>$("img.nexthover").hover( function() { this.src = this.src.replace("_off", "_on"); }, function() { this.src = this.src.replace("_on", "_off"); }); $('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').addClass('nextHide'); $('.nextbuttonA').hover(function() { $('#A.nextHide').fadeIn("slow"); $('#B,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); }); $('.nextbuttonB').hover(function() { $('#B.nextHide').fadeIn("slow"); $('#A,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); }); $('.nextbuttonC').hover(function() { $('#C.nextHide').fadeIn("slow"); $('#A,#B,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); }); $('.nextbuttonD').hover(function() { $('#D.nextHide').fadeIn("slow"); $('#A,#B,#C,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); }); $('.nextbuttonE').hover(function() { $('#E.nextHide').fadeIn("slow"); $('#A,#B,#C,#D,#F,#G,#H,#I,#J.nextHide').fadeOut(); }); $('.nextbuttonF').hover(function() { $('#F.nextHide').fadeIn("slow"); $('#A,#B,#C,#D,#E,#G,#H,#I,#J.nextHide').fadeOut(); }); $('.nextbuttonG').hover(function() { $('#G.nextHide').fadeIn("slow"); $('#A,#B,#C,#D,#E,#F,#H,#I,#J.nextHide').fadeOut(); }); $('.nextbuttonH').hover(function() { $('#H.nextHide').fadeIn("slow"); $('#A,#B,#C,#D,#E,#F,#G,#I,#J.nextHide').fadeOut(); }); $('.nextbuttonJ').hover(function() { $('#I.nextHide').fadeIn("slow"); $('#A,#B,#C,#D,#E,#F,#G,#H,#J.nextHide').fadeOut(); }); $('.nextbuttonK').hover(function() { $('#J.nextHide').fadeIn("slow"); $('#A,#B,#C,#D,#E,#F,#G,#H,#I.nextHide').fadeOut(); }); $('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').click(function(){ $('.nextHide').fadeOut(); }); </code></pre> <p>To get hoverIntent to work I split the function like this:</p> <pre><code>$("img.nexthover").hover( function() { this.src = this.src.replace("_off", "_on"); }, function() { this.src = this.src.replace("_on", "_off"); }); $('#A,#B,#C,#D,#E,#F,#G,#H,#I,#J').addClass('nextHide'); $('.nextbuttonA').hoverIntent(function() { $('#A.nextHide').fadeIn("slow"); }, function() { $('#B,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); }); $('.nextbuttonB').hoverIntent(function() { $('#B.nextHide').fadeIn("slow"); }, function() { $('#A,#C,#D,#E,#F,#G,#H,#I,#J.nextHide').fadeOut(); }); ---etc---- </code></pre> <p>But now the div isn't hiding until you leave the button like before? Sorry if this is too newbie I'm teaching myself by jumping in...</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload