StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery hoverIntent - What am I doing wrong when I split the function?
text
Body
copied!<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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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